#booking-page {
    margin-top: var(--size_l);
    row-gap: var(--size_l);
    min-height: 100dvh;
}
@media only screen and (min-width: 768px) {
    #booking-page {margin-top: var(--size_xl);}
}


.booking_p-section {
    margin-right: auto;
    margin-left: auto;
}
@media only screen and (min-width: 768px) {
    .booking_p-section {
        padding-right: 10rem;
        padding-left: 10rem;
    }
}
@media only screen and (min-width: 1096px) {
    .booking_p-section {
        padding-right: 0;
        padding-left: 0;
        max-width: 32rem;
    }
}




/* 
TITLE
*/
#booking_p-title {column-gap: var(--size_s);}
#booking_p-title > p {min-width: 4rem;}

@media only screen and (min-width: 768px) {
    #booking_p-title {column-gap: var(--size);}
    #booking_p-title > p {max-width: 10rem;}
}

@media only screen and (min-width: 1096px) {
    #booking_p-title {column-gap: var(--size_l);}
    #booking_p-title > p {max-width: 16rem;}
}



/* 
BG
*/
#video-bg {
    min-width: 100vw;
    height: 70vw;
    margin: -3.75rem -1rem -5rem;
}

.video-bg {
    width: 65vw;
    mix-blend-mode: multiply;
}
.video-bg.--left {left: 0;}
.video-bg.--right {
    scale: -1 1;
    right: 0;
}

@media only screen and (min-width: 768px) {
    .video-bg {
        top: 12rem;
        width: 9rem;
    }
}
@media only screen and (min-width: 1096px) {
    .video-bg {
        position: fixed;
        top: 50dvh;
        width: unset;
        height: 85dvh;
        max-width: 20rem;
        transform: translateY(-50%);
    }
}




/* 
INFO
*/
#booking_p-info h3 {margin-bottom: var(--size);}




/* 
QA
*/
#booking_p-qa {row-gap: var(--size_s);}

.booking_p-qa-item button {width: 100%;}
.booking_p-qa-item img {
    width: auto;
    height: .5rem;
    transition: rotate 500ms;
}
.booking_p-qa-item[data-status="show"] img {rotate: 180deg;}

.booking_p-qa-item > div div {margin-top: var(--size);}
.booking_p-qa-item[data-status="hide"] > div {height: 0;}




/* 
ALLERGIES
*/
#booking_p-allergies {border: 2px solid var(--c-grey);}

#booking_p-allergies > div:first-of-type {
    column-gap: var(--size_s);
    margin-bottom: var(--size);
}

#booking_p-allergies img {
    width: auto;
    height: 1.5rem;
}




/* 
FRAME
*/
#booking_p-frame {
    width: 100%;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    background: rgba(245, 245, 245, .7);
}

#booking_p-frame iframe {
    position: relative;
    max-width: 26rem;
    z-index: 20;
}