#cateringHeader {
    background-size: cover;
    background-image: url("/assets/img/catering/catering_hero_order@2x.jpg");
    padding: 133px 165px 170px;
}


#cateringContent {
    color: #FFF;
}

#cateringContent > h1 {
    font: normal normal bold 48px/48px Eames Century Modern;
    margin: 0;
}

#cateringContent > p {
    font: normal normal normal 18px/36px Rebrand;
    margin: 10px auto 0;
}

#cateringContent > a {
    margin: 22px 0;
    max-width: 245px;
}

#cateringBanner {
    background-color: var(--primary-green);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 35px 30px 31px;
    color: #FFF;
}

#cateringBanner > h2 {
    font: normal normal bold 24px/32px Eames Century Modern;
    margin: 0 6px;
}

#cateringBanner > p {
    font: normal normal normal 18px/16px Rebrand;
    margin: 0;
}

.cateringFade.quality {
    background-image: linear-gradient(to left, rgb(255, 255, 255), rgb(255, 255, 255) 25%, rgba(0, 0, 0, 0) 55%), url("/assets/img/catering/bg_catering_quality@2x.png");
}

.cateringFade.quality .sectionLink {
    padding: 165px 30px 174px;
}

.cateringFade.stacks {
    background-image: linear-gradient(to left, rgb(255, 255, 255), rgb(255, 255, 255) 25%, rgba(0, 0, 0, 0) 55%), url("/assets/img/catering/catering_callout@2x.jpg");
}

.cateringFade.stacks .sectionLink {
    padding: 162px 30px 219px;
}

.cateringFade {
    background-size: cover;
    background-position: center;

}

.cateringFade .sectionLink {
    display: flex;
    flex-direction: row-reverse;
}

.cateringFadeContent {
    position: relative;
    right: 11%;
    color: #694B2C;
    text-align: center;
}

.cateringFadeContent > h2 {
    font: normal normal bold 48px/48px Eames Century Modern;
    margin: 0;
}

.cateringFadeContent > p {
    font: normal normal normal 24px/34px Rebrand;
    margin: 12px auto 0;
}

.cateringFadeContent > .button {
    max-width: 245px;
    margin: 27px auto;
}

.cateringSplit .sectionLink {
    display: grid;
    grid-template-columns: 50% 50%;
}

.cateringSplitContent {
    background-image: url("/assets/img/index/bg_green@2x.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.cateringSplitContent > h2 {
    color: #FFF;
    margin: 0;
    font: normal normal bold 48px/54px Eames Century Modern;
}

.cateringSplitContent > .button {
    max-width: 245px;
    background-color: #95CA57;
    margin: 26px auto;
}

.cateringSplit > img {
    object-fit: cover;
    width: 100%;
}

#cateringBottom {
    width: 100%;
}

#cateringBottomContainer {
    width: 100%;
    padding: 7px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: auto;
}

.cateringBottomItem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #694B2C;
    width: 100%;
}

.cateringBottomContent {
    position: absolute;
    top: 8%;
    text-align: center;
}

.cateringBottomContent > h4 {
    margin: 0;
    font: normal normal bold 18px/21px Eames Century Modern;
}

.cateringBottomContent > p {
    margin: 8px 0;
    font: normal normal normal 14px/18px Rebrand;
}

.cateringBottomImage {
    width: 100%;
    object-fit: cover;
}

@media (max-width: 800px) {

    #cateringHeader {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, .6) 35%, rgba(0, 0, 0, 0) 55%), url("/assets/img/catering/catering_hero_bg_m@2x.jpg");
        padding: 53px 30px 275px;
    }

    #cateringContent {
        left: unset;
        text-align: center;
    }

    #cateringContent > h1 {
        font: normal normal normal 26px/30px Rebrand;
    }

    #cateringContent > p {
        font: normal normal normal 18px/36px Rebrand;
    }

    #cateringContent > .button {
        margin: 19px auto 17px;
        max-width: 302px;
        height: 55px;
    }

    #cateringBanner {
        flex-direction: column;
        padding: 14px 30px 18px;
    }

    #cateringBannerSpliter {
        display: none;
    }

    #cateringBanner > h2 {
        font: normal normal bold 21px/21px Eames Century Modern;
        margin: 0;
    }

    #cateringBanner > p {
        font: normal normal normal 18px/16px Rebrand;
        margin: 6px auto 0;
    }

    .cateringFade.quality {
        background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255) 25%, rgba(0, 0, 0, 0) 55%), url("/assets/img/catering/bg_catering_quality_m@2x.jpg");
    }

    .cateringFade.quality .sectionLink {
        padding: 40px 30px 389px;
    }

    .cateringFade.stacks {
        background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255) 25%, rgba(0, 0, 0, 0) 55%), url("/assets/img/catering/catering_callout_m@2x.jpg");
    }

    .cateringFade.stacks .sectionLink {
        padding: 42px 30px 500px;
    }

    .cateringFade.stacks .sectionLink > .button {
        max-width: 302px;
    }

    .cateringFadeContent {
        right: unset;
        text-align: center;
        margin: auto;
        flex: 1;
    }

    .cateringFadeContent > h2 {
        font: normal normal bold 32px/34px Eames Century Modern;
    }

    .cateringFadeContent > p {
        font: normal normal normal 18px/24px Rebrand;
        margin: 14px auto 0;
    }

    .cateringFadeContent > .button {
        max-width: 302px;
        margin: 14px auto;
        height: 55px;
    }

    .cateringSplit .sectionLink {
        grid-template-columns: 1fr;
    }

    .cateringSplitContent {
        height: 375px;
    }

    .cateringSplitContent > h2 {
        font: normal normal bold 32px/34px Eames Century Modern;
    }

    .cateringSplitContent > .button {
        max-width: 302px;
        height: 55px;
        margin: 19px auto;
    }

    .cateringBottomContent > h4 {
        margin: 0;
        font: normal normal bold 18px/21px Eames Century Modern;
    }

    .cateringBottomContent > p {
        margin: 8px 0;
        font: normal normal normal 14px/18px Rebrand;
    }

    #cateringBottomContainer {
        grid-template-columns: none;
        display: flex;
        overflow-x: auto;
        gap: 6px;
    }

    .cateringBottomContent {
        top: 7%;
    }

    .cateringBottomImage {
        min-width: 299px;
        min-height: 431px;
    }

}