/* --- HOT DRINKS --- */
@media screen and (min-width: 0rem) {
    .hot-drinks {
        margin-block: 60px;
        scroll-margin-top: 140px;
    }
    
    .header {
        text-align: center;
    }

    .banner {
        width: 100%;
        object-fit: cover;
        object-position: 43% center;
        min-height: 350px;
        margin-top: 32px;
        max-height: 600px;
    }

    .cs-menu-content {
        max-width: 32rem;
        margin-inline: auto;
        text-align: left;
    }

    .cs-menu-items {
        padding-inline: 24px;
        margin-block: 48px;
        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    .cs-menu-item-header {
        display: flex;
        align-items: center;
    }

    .cs-menu-item-name {
        font-size: 1rem;
        font-family: "Prata", Serif;
        white-space: nowrap;
    }

    .line {
        width: 100%;
        height: 0.6px;
        background-color: var(--menu-body-text-color);
        margin-inline: 12px;
    }

    .cs-menu-item-price {
        font-size: 1rem;
        font-family: "Prata", Serif;
        white-space: nowrap;
    }

    .cs-menu-item-description {
        font-family: "Lato", sans-serif;
        font-weight: 300;
        color: var(--menu-body-text-color);
        margin-top: 8px;
        font-size: 1rem;
    }


    .cs-menu-content .image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .section-line {
        margin-block: 60px;
        border: none;
        height: 0.5px;
        background-color: white;
    }
}
@media screen and (min-width: 64rem) {
    .cs-menu-content {
        margin-top: 32px;
        max-width: 80rem;
        display: flex;
        align-items: center;
    }
    
    .banner {
        padding-inline: 16px
    }

    .cs-menu-items {
        width: 55%;
    }

    .menu-side-by-side-section .cs-menu-content {
        flex-direction: row;
    }

    .menu-side-by-side-section .cs-menu-items {
        padding-right: 60px;
    }

    .menu-side-by-side-section-reverse .cs-menu-content {
        flex-direction: row-reverse;
    }

    .menu-side-by-side-section-reverse .cs-menu-items {
        padding-left: 60px;
        margin-right: 32px;
    }
}

/* --- COLD DRINKS --- */
@media screen and (min-width: 0rem) {
    .cold-drinks {
        scroll-margin-top: 140px;
    }

    .cold-drinks .banner {
        clip-path: inset(2px 0 2px 0); /* remove border around image form download */
        object-position: 55% center;
    }
}

/* --- PASTRIES --- */
@media screen and (min-width: 0rem) {
    .pastries {
        scroll-margin-top: 140px;
    }

    .pastries .banner {
        clip-path: inset(2px 0 2px 0); /* remove border around image form download */
        object-position: 55% center;
    }
}

/* --- SANDWICHES --- */
@media screen and (min-width: 0rem) {
    .sandwiches {
        scroll-margin-top: 140px;
    }
    
    .sandwiches .banner {
        clip-path: inset(2px 0 2px 0); /* remove border around image form download */
        object-position: 65% center;
    }
}