/* Default (for smallest screens) */
@media (min-width: 330px) {
    #mission-contract .timeline {
        gap: 50px !important;
    }
    #mission-contract .timeline-step:not(:last-child)::after {
        height: 30px !important;
        top: 140px !important;
    }
}

@media (min-width: 500px) {
    p, li {
        font-size: 0.9rem !important;
        line-height: 24px !important;
    }

    #mission-contract .timeline-step:not(:last-child)::after {
        top: 117px !important;
    }
}

/* ≥576px (SM)*/
@media (min-width: 576px) {
    h1 {
        font-size: 80px !important;
        line-height: 80px !important;
    }
    h2 {
        font-size: 46px !important;
        line-height: 46px !important;
    }
    .cta-button-primary:hover {
        padding: 25px 45px 25px 50px;
    }
    .cta-button-primary i.fa-arrow-right-long {
        display: inline;
    }
    .wrap-50-20 { 
        padding: 50px 20px; 
    }
    #hero, #hero-cocktails, #hero-cocktails-selection {
        height:70vh;
    }
    #hero .cover {
        margin:20px; 
        border-radius:20px;
        background-position:center; 
    }
    #hero-cocktails .cover, #hero-cocktails-selection .cover {
        margin:20px; 
        border-radius:20px;
        background-position:80%; 
    }
    #hero .cover::before, #hero-cocktails .cover::before, #hero-cocktails-selection .cover::before {
        border-radius:20px; 
    }   
    #hero .text-content, #hero-cocktails .text-content, #hero-cocktails-selection .text-content {
        row-gap: 25px;
    }
    #hero p,  #hero-cocktails p, #hero-cocktails-selection p {
        width: 75%;
        padding: 0;
    } 
    #hero span.display, #hero-cocktails span.display, #hero-cocktails-selection span.display {
        display: inline;
    }
    #menu-modal .promotional-placement {
        height:200px;
    }
    .modal-content {
        margin: 50px auto;
    }    
    .leaflet-left {
        left: 90% !important;
    }
    .leaflet-top {
        top: 15px !important;
    }
    #insta-flow .vignette {
        height: 175px;
    }
    #dynamicSearchResults {
        max-height:85vh;
    }    
    #mission-header img.cover {
        width:80%; 
        height: auto;
    }
    #mission-statement .card-cover {
        width: 425px; 
        height: 175px; 
    }      
}

/* ≥768px (MD)*/
@media (min-width: 768px) {
    #hero {
        height:60vh;
    }
    #hero-cocktails, #hero-cocktails-selection {
        height:40vh;
    }
    #hero p, #hero-cocktails p, #hero-cocktails-selection p {
        width: 50%;
    }
    #nldmobileMenuModal .modal-content {
        margin: 20px auto;
    }    
    #presentation .vignette {
        height: 500px; 
    }
    #selected-product .product-breadcrumbs {
        padding-top: 3rem; 
    }
    #product .cover {
        height:700px; 
    }    
    #cocktail .cover {
        height:400px; 
    }    
    #cocktail .ingredient-text {
        max-width: 500px;
    }
    #mission-header img.cover {
        width:65%; 
        height: auto;
    }
    #mission-contract .timeline {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
    #mission-contract .timeline-step:not(:last-child)::after {
        top: 20px !important;
        width: 100px !important;
        height: 2px !important;
        left: calc(150% - 50px) !important;
        transform: translateX(-50%) !important;
    }
    .timeline-content {
        margin-top: 0.5rem;
    }    
}

/* ≥992px (LG)*/
@media (min-width: 992px) {
    .nav-nld-logo {
        width: 200px; 
        height: auto;
    }
    .nav-nld-min-logo {
        width: 40px; 
        height: auto;
    }
    #menu-modal .promotional-placement {
        height:300px;
    }
    .leaflet-left {
        left: 93% !important;
    }
    #product .supporting-visual {
        height:100%; 
    }
    #cocktail .ingredient-text {
        max-width: 200px;
    }
    #mission-statement .card-cover {
        width: 275px; 
        height: 135px; 
    }      
    #mission-contract .timeline-step:not(:last-child)::after {
        width: 150px !important;
        left: calc(150% - 70px) !important;
    }
}

/* ≥1200px (XL)*/
@media (min-width: 1200px) {
    #hero {
        height:80vh;
    }
    #hero-cocktails, #hero-cocktails-selection {
        height:50vh;
    }
    #hero img.logo {
        width:250px; 
    }
    #hero p, #hero-cocktails p, #hero-cocktails p {
        width: 30%;
    }
    #menu-modal .promotional-placement {
        height:auto;
    }
    #locations .locating-markers .markers {
        height: 500px; 
    }
    #product .rating-wrap {
        margin-top: 20%;
    }
    #cocktail .ingredient-text {
        max-width: 130px;
    }
    #mission img.cover {
        width:100%; 
        height: auto;
    }
    #mission-statement .card-cover {
        width: 350px; 
        height: 150px; 
    }
    #mission-contract .timeline-step:not(:last-child)::after {
        left: calc(150% - 110px) !important;
    }
    .nld-user-profile-home-page {
        min-height:450px !important;
    }
}

/* ≥1400px (XXL)*/
@media (min-width: 1400px) {   
    #locations .title {
        padding:50px 20px 0 20px;
    }
    #locations .locating-markers {
        padding-left: 40px; 
        padding-right: 40px;    
    }
    #locations .locating-markers .markers {
        height: 500px; 
    }
    #locations .ctas {
        padding:0 20px 75px 20px;
    }
    .leaflet-left {
        left: 95% !important;
    }
    .leaflet-top {
        top: 15px !important;
    }
    #product .supporting-visual {
        min-height: 450px;
    }
    #cocktail .ingredient-text {
        max-width: 200px;
    }
    #mission-contract .timeline-step:not(:last-child)::after {
        left: calc(107% - 0px) !important;
    }
    #cookie-banner {
        bottom:10px; 
        right:10px; 
        max-width:400px; 
        padding: 50px 50px 35px 50px; 
    }
}