/*mobile flow*/
@media(max-width: 1070px){
    .navbar{
        height: 65px;
    }
    .logo{
        height: 28px;
    }
    .section-flex{
        flex-direction: column;
        gap: 40px;
    }
    .section-grid{
        grid-template-rows: 22vw 22vw;
    }
    #static-overlay-window{
        margin-left: 15vw;
    }
    .story-img{
        display: none;
    }
    #about-img{
        display: none;
    }
    .footer-contact{
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}
@media(max-width: 860px){
    h1{
        font-size: var(--typo-h1-mobile);
        letter-spacing: var(--spacing-medium-mobile);
    }
    h2{
        font-size: var(--typo-h2-mobile);
        line-height: var(--lineheight-normal);
        letter-spacing: var(--spacing-medium-mobile);
    }
    h3{
        font-size: var(--typo-h3-mobile);
        letter-spacing: var(--spacing-normal-mobile);
    }
    p, span{
        font-size: var(--typo-p-mobile);
        line-height: var(--lineheight-mobile);
        letter-spacing: var(--spacing-normal-mobile);
    }
    .nav-link-container{
        display: none;
    }
    .booking-container{
        display: none;
    }
    .mobile-btn-menu{
        display: block;
        padding-right: 15px;
    }
    .hero-title{
        font-size: var(--typo-h1-mobile);
        letter-spacing: var(--spacing-medium-mobile);
    }
    .hero-p{
        font-size: var(--typo-p-mobile);
        letter-spacing: var(--spacing-normal-mobile);
        line-height: var(--lineheight-mobile);
    }
    .section-container{
        padding: 40px 10vw;
    }
    .section-title, .story-card h2{
        font-size: var(--typo-h2-mobile);
        letter-spacing: var(--spacing-medium-mobile);
        line-height: var(--lineheight-normal);
    }
    .section-p, .story-card p{
        font-size: var(--typo-p-mobile);
        line-height: var(--lineheight-mobile);
    }
    .static-overlay-window{
        margin-left: 30vw;
    }
    .gallery-title-container{
        border-radius: 12px;
    }
    .gallery-title-container h1{
        font-size: var(--typo-h1-mobile);
        letter-spacing: var(--spacing-medium-mobile);
    }
    .gallery{
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        margin: 4vh 4vw;
    }
    .gallery-item{
        height: 150px;
    }
    .overlay span{
        font-size: var(--typo-h3-mobile);
    }
    .reviews-container{
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .footer-contact{
        font-size: var(--typo-footer-mobile);
    }
    .footer-logo img{
        width: 40vw;
    }
}