.modal {
    @apply items-center justify-center rounded shadow-lg border-[1px];
}

/* Bottom-sheet on small screens: pin to bottom, full width, slide up */
@media (max-width: 767px) {
    .modal > [data-modal-target="contentWrapper"],
    .modal turbo-frame {
        display: contents;
    }

    .modal {
        align-items: end;
    }

    .modal .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        overflow-x: hidden;
        translate: 0 100%;
        transition: translate 0.3s ease-out;
    }

    .modal.modal-open .modal-box,
    .modal[open] .modal-box {
        translate: 0 0;
    }
}