.bottom-sheet {
    width: 100%;
    max-width: 320px;
}

.bottom-sheet-header {
    display: none;
}

.hide-on-lg {
    display: none;
}

@media (max-width: 1056px) {
    .bottom-sheet-backdrop {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9998;
        display: none;
        opacity: 0;
        transition: opacity 0.3s var(--easing);
    }

    .bottom-sheet-backdrop.visible {
        display: block;
        opacity: 1;
    }

    .bottom-sheet {
        position: fixed;
        bottom: -100%;
        width: 100%;
        left: 0;
        right: 0;
        background-color: var(--white);
        border-radius: 24px 24px 0px 0px;
        transition: bottom 0.3s var(--easing);
        z-index: 9999;
        max-height: 90%;
        max-width: 100%;
    }

    .bottom-sheet.open {
        bottom: 0;
    }
    .bottom-sheet-header {
        display: block;
        padding: 32px 0px 24px 0px;
        position: relative;
    }

        .bottom-sheet-header h2 {
            text-align: center;
        }

        .bottom-sheet-header .bottom-sheet-close-btn {
            background-color: transparent;
            display: block;
            position: absolute;
            right: 0px;
            top: 0px;
        }

    .bottom-sheet-content {
        height: 100%;
    }
    .bottom-sheet-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .hide-on-lg {
        display: block;
    }
}