#about h2 { max-width: 72ch; line-height: 1.6; font-weight: 300; word-spacing: 2px; font-size: 1.2rem; }
.hotel-details p { font-size: 0.7rem; }
#dining, #accomodations { overflow: hidden; overflow-x: scroll; cursor: move; }
#dining .prop-items { width: 90vw; }
#wellness__spa { width: 100%; height: 100%; }
.accordion { font-family: LarkenRegular, serif; background-color: var(--light); color: #444; cursor: pointer; padding: 18px 0; width: 100%; text-align: left; border: none; outline: none; transition: 0.2s ease-out; }
.panel { padding: 0; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
.passive { display: none; }
.f-w-button { display: block; text-align: center; border-radius: 9999px; width: 100%; padding: 20px 0px; text-transform: uppercase; }
.newsletter-form { width: 100%; }
.newsletter-form form { float: right; width: 80%; }
#newsletter input[type="email"] { outline: none; border:none; width: 80%; padding: 20px; border-bottom: 1px solid; }
#newsletter input[type="submit"] { background: transparent; border: 1px solid var(--dark); padding: 1rem; border-radius: 9999px; margin-bottom: 1rem; }
.bx-shdw { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; }
#experiences .col { min-height: 72vh; }
.map-container { width: 100%; min-height: 420px; border: 0; border-radius: 12px; }
#gallery img { max-height: 720px; padding: 0px 20px; }
figure { margin: 0; max-height: 300px; max-width: 100%; overflow: hidden;
    img { height: 300px; width: 100%; object-fit: cover; scale: 1;-webkit-transition: .7s ease-in-out; transition: .7s ease-in-out; }
    &:hover img { scale: 1.3; }
}
article {
    figure {
        max-height: 500px;
        img {
            height: 500px;
        }
    }
}
/** Google Reviews Section **/
#scrollIcon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: transparent;
    cursor: pointer;
    border-radius: 999px;
    padding: 8px 12px;
    &:not(:hover) {
    animation: bounce 0.8s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    }
}
@keyframes bounce {
    0% { bottom: 25px; }
    100% { bottom: 10px; }
}
/** Flickity */
.flickity-prev-next-button, .flickity-prev-next-button:hover { background: transparent; top:100%; padding: 0; width: 24px; height: 24px; margin-top: 12px; }
.flickity-prev-next-button .flickity-button-icon { color: var(--dark); }
.flickity-prev-next-button.previous { left: 32%;
    &:focus { box-shadow: none; } }
.flickity-prev-next-button.next { right: 32%;
    &:focus { box-shadow: none; } }
.flickity-page-dots {
    position: relative;
    left: 50%;
    width: 70px;
    height: 20px;
    transform: translateX(-50%);

    &:before {
        content: "/";
    }

    .dot, .dot:before, .dot:after {
        float: left;
        width: 30px;
        height: 20px;
    }
    .dot {
        counter-increment: carousel-cell;
        position: absolute;
        left: 0;
        margin: 0;
        opacity: 1;

        &.is-selected {z-index: 1}

        &:before {
            content: counter(carousel-cell);
            background-color: #fff;
            text-align: right;
        }

        &:last-child:after {
            content: counter(carousel-cell);
            position: absolute;
            top: 0;
            right: -40px;
            text-align: left;
            color: #000;
        }
    }
}
#reviews {
    .flickity-prev-next-button {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .flickity-prev-next-button.previous {
        left: auto;
        right: 0px;
        display: none;
    }

    .flickity-prev-next-button.next {
        right: 10px;
        background-color: #dedede;
        padding: 1.25rem;
        background-color: rgba(255,255,255,0.6);
        border: 5px double black;
        width: 44px;
        height: 44px;
    }
}
@media screen and (min-width: 780px) {
    #about h2 { font-size: 1.8rem; }
    #accomodations {
        .carousel-cell { max-width: 48%;
            .content { position: absolute; bottom: 4px; padding: 10px 32px; background-color: rgba(0,0,0,0.4); color: var(--light); }
        }
        .flickity-slider {
            .carousel-cell { padding: 0 .5rem; }
        }
    }
    .flickity-prev-next-button.previous { left: 45%; }
    .flickity-prev-next-button.next { right: 45%; }
    #dining .prop-items { width: 28vw; }
    article { width: 24vw; }
    #google-reviews { .col-2{ border-left: 1px solid white; }}
}
@media screen and (max-width: 780px) {
    .col-2 { display: contents;
        #wellness__spa { min-height: 50vh; }
    }
    #accomodations {
        .carousel-cell { min-width: 90vw; }
    }
    #offers {
        .col { min-width: 90vw; }
    }
    #google-reviews {
        row {
            .col-1, .col-2 { width: 100%; position: block; display: block; border: none;}
        }
    }
}