/**
 * Homepage hero — text-led layout without the side card.
 * Scoped to .mxd-hero-04; load after main.min.css.
 */

.mxd-hero-04__right {
    width: 100%;
    max-width: 68rem;
    gap: 0;
    padding-bottom: 3.2rem;
}

@media only screen and (min-width: 768px) {
    .mxd-hero-04__right {
        padding-bottom: 4rem;
    }
}

@media only screen and (min-width: 1200px) {
    .mxd-hero-04__headline {
        padding: 0;
    }

    .mxd-hero-04__right {
        padding-bottom: 1.2rem;
    }
}

@media only screen and (min-width: 1600px) {
    .mxd-hero-04__headline {
        padding: 0;
    }

    .mxd-hero-04__right {
        max-width: 110rem;
    }
}

/* Services sit directly under the title as one unit */
.mxd-hero-04__headline {
    gap: 2.2rem;
}

@media only screen and (min-width: 768px) {
    .mxd-hero-04__headline {
        gap: 2.6rem;
    }
}

@media only screen and (min-width: 1200px) {
    .mxd-hero-04__headline {
        gap: 2.8rem;
    }
}

@media only screen and (min-width: 1600px) {
    .mxd-hero-04__headline {
        gap: 3.2rem;
    }
}

.mxd-hero-04 .hero-04-services {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    align-content: start;
    column-gap: 2.8rem;
    row-gap: 0.7rem;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mxd-hero-04 .hero-04-services li {
    margin: 0;
}

/* Extra 2 columns (4 points) — desktop only */
.mxd-hero-04 .hero-04-services__desktop {
    display: none;
}

.mxd-hero-04 .hero-04-services a,
.mxd-hero-04 .hero-04-services .t-small {
    display: inline-block;
    margin: 0;
    font: normal var(--fw-regular) 1.55rem/1.3 var(--_font-accent);
    color: var(--t-medium);
    text-decoration: none;
    text-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.45);
}

.mxd-hero-04 .hero-04-services a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: color 0.25s ease, background-size 0.25s ease;
}

.no-touch .mxd-hero-04 .hero-04-services a:hover {
    color: var(--t-bright);
    background-size: 100% 1px;
}

@media only screen and (min-width: 768px) {
    .mxd-hero-04 .hero-04-services {
        column-gap: 3.4rem;
        row-gap: 0.8rem;
    }

    .mxd-hero-04 .hero-04-services a,
    .mxd-hero-04 .hero-04-services .t-small {
        font-size: 1.7rem;
    }
}

@media only screen and (min-width: 1200px) {
    .mxd-hero-04__right {
        max-width: 92rem;
    }

    .mxd-hero-04 .hero-04-services {
        grid-template-columns: repeat(6, max-content);
        column-gap: 3.2rem;
        row-gap: 0.85rem;
    }

    .mxd-hero-04 .hero-04-services__desktop {
        display: list-item;
    }

    .mxd-hero-04 .hero-04-services a,
    .mxd-hero-04 .hero-04-services .t-small {
        font-size: 1.75rem;
    }
}

@media only screen and (min-width: 1600px) {
    .mxd-hero-04 .hero-04-services {
        column-gap: 3.6rem;
    }
}