@layer pages {
@font-face {
    font-family: "Inter";
    src: url("../../fonts/inter-400-cyrillic.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    src: url("../../fonts/inter-400-latin.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.groupage-hero {
    --groupage-hero-brand-mark: #e6e6e6;

    overflow: hidden;
    padding-block: 30px 90px;
}

.groupage-hero__layout {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
    grid-template-areas:
        "copy visual"
        "footer footer";
    column-gap: 28px;
    isolation: isolate;
}

.groupage-hero__copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: 25px;
    grid-area: copy;
    padding-top: 4px;
}

.groupage-hero__title {
    margin-bottom: 4px;
}

.groupage-hero__text {
    color: var(--color-brand-dark);
}

.groupage-hero__visual {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 300px;
    grid-area: visual;
}

.groupage-hero__map {
    position: absolute;
    z-index: 0;
    top: 38px;
    left: -36px;
    width: min(100%, 805px);
    height: auto;
}

.groupage-hero__truck {
    position: absolute;
    top: -45px;
    right: 0;
    width: min(77%, 588px);
    height: auto;
}

.groupage-hero__footer {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 19px;
    grid-area: footer;
}

.groupage-hero__brand-mark {
    width: 51px;
    height: 26px;
    color: var(--groupage-hero-brand-mark);
}

.groupage-hero__benefits {
    display: grid;
    width: min(100%, 660px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.groupage-hero__benefits li {
    display: grid;
    min-height: 34px;
    align-content: center;
    padding: 6px 10px;
    border-radius: var(--radius-control);
    background: var(--color-brand-orange);
    color: var(--color-accent-contrast);
    font-family: "Inter", Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: 0;
    text-align: center;
}

.delivery-process {
    --delivery-process-watermark: #f6f6f6;

    padding-block: 100px;
    background: var(--color-section-muted);
}

.delivery-process__heading {
    display: grid;
    gap: 21px;
    margin-bottom: 32px;
}

.delivery-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "application dropoff receipt"
        "application tracking application-form";
    gap: 18px;
}

.delivery-process__card {
    min-width: 0;
}

.delivery-process__card--application {
    display: grid;
    gap: 20px;
    grid-area: application;
    grid-template-rows: auto auto minmax(90px, 1fr) auto;
    padding: 21px;
    border-radius: var(--radius-panel);
    background: var(--color-surface);
}

.delivery-process__card--dropoff {
    grid-area: dropoff;
}

.delivery-process__card--tracking {
    grid-area: tracking;
}

.delivery-process__card--receipt {
    grid-area: receipt;
}

.delivery-process__grid > .client-application {
    grid-area: application-form;
}

.delivery-process__card-heading {
    display: flex;
    gap: 10px;
    align-items: center;
}

.delivery-process__card-text {
    color: var(--color-text-tertiary);
}

.delivery-process__card-text a {
    color: var(--color-brand-orange);
    text-decoration: none;
}

.delivery-process__watermark {
    width: min(100%, 325px);
    height: auto;
    aspect-ratio: 325 / 168;
    align-self: center;
    justify-self: center;
    color: var(--delivery-process-watermark);
}

@media (max-width: 767px) {
    .groupage-hero {
        padding-block: 20px 50px;
    }

    .groupage-hero__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "visual"
            "footer";
        row-gap: 24px;
    }

    .groupage-hero__copy {
        gap: 18px;
        padding-top: 0;
    }

    .groupage-hero__title {
        margin-bottom: 2px;
    }

    .groupage-hero__visual {
        min-height: 205px;
    }

    .groupage-hero__map {
        top: auto;
        bottom: 80px;
        left: -10px;
        width: calc(100% + 16px);
    }

    .groupage-hero__truck {
        top: auto;
        right: -5px;
        bottom: 0;
        width: min(100%, 330px);
    }

    .groupage-hero__footer {
        gap: 14px;
    }

    .groupage-hero__benefits {
        gap: 5px;
    }

    .groupage-hero__benefits li {
        min-height: 56px;
        padding-inline: 4px;
    }

    .delivery-process {
        padding-block: 40px 50px;
    }

    .delivery-process__heading {
        margin-bottom: 33px;
    }

    .delivery-process__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "application"
            "dropoff"
            "tracking"
            "receipt"
            "application-form";
        gap: 15px;
    }

    .delivery-process__card--application {
        grid-template-rows: auto;
        padding: 20px;
    }

    .delivery-process__watermark {
        width: min(100%, 325px);
        margin-block: 4px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .groupage-hero__layout {
        grid-template-columns: minmax(260px, 32%) minmax(0, 1fr);
    }

    .delivery-process__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "application dropoff"
            "application tracking"
            "receipt application-form";
    }
}

}