/* ---------- Laptop ---------- */
@media (max-width: 1400px) {
    .hero img {
        align-self: center;
    }

    /* ---------- Card grid (services / partners) ---------- */

    .card-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* ---------- Job types Info cards -------- */

    .info-cards-title {
        text-align: center;
        margin-bottom: var(--space-3);
    }

    .info-cards {
        gap: var(--space-2);
    }

    .info-card {
        column-gap: var(--space-3);
        padding: var(--space-3);
    }

    /*-------- Story carousel ------*/

    .story-carousel__image {
        aspect-ratio: 1/1;
    }

    .story-carousel__img {
        padding: var(--space-1);
    }


}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
    .hero {
        padding-block: var(--space-5);
    }

    .hero>.container {
        grid-template-columns: 1fr;
        padding-inline: var(--space-3);
    }


    .hero img {
        max-height: 400px;
        justify-self: center;
        margin-inline: auto;
    }

    .hero h4 {
        text-align: center;
    }

    .hero h1 {
        font-size: var(--fs-2xl);
        max-width: 25ch;
        text-align: center;
        margin-inline: auto;
    }

    .hero p {
        margin-inline: auto;
        /* center the paragraph block itself, not just its text */
    }

    /* ---------- Card grid (services / partners) ---------- */

    .card-grid {
        gap: var(--space-3);
        row-gap: var(--space-3);
    }


    .card p {
        max-width: none;
    }

    /* ---------- Job types Info cards -------- */

    .info-cards-title {
        margin-bottom: var(--space-4);
    }

    .info-cards {
        grid-template-columns: 1fr;
    }

    .info-card {
        column-gap: var(--space-2);
        padding: var(--space-3);
    }

    /*-------- Story carousel ------*/

    .story-carousel {
        gap: var(--space-2);
    }

    .story-carousel__item h3 {
        width: 28ch;
    }

    .story-carousel__item p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {

    .hero img {
        max-height: 280px;
        justify-self: center;
        margin-inline: auto;
    }

    .hero h4 {
        text-align: center;
    }

    .hero h1 {
        font-size: var(--fs-2xl);
        max-width: none;
        text-align: center;
        margin-bottom: var(--space-05);
    }

    .hero p {
        margin-inline: auto;
        padding-inline: var(--space-2)
    }

    .logo-strip-section {
        display: none;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .card {
        flex-direction: row;
        gap: var(--space-3);
        padding: var(--space-2);
        align-items: center;
    }

    .card img {
        max-width: 80px;
        margin-bottom: 0;
    }

    .card p {
        margin-bottom: 0;
    }


    /* ---------- Job types Info cards -------- */

    .info-cards-title {
        margin-bottom: var(--space-5);
    }

    .info-cards {
        gap: var(--space-4);
    }

    .info-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "title"
            "body"
        ;
        gap: var(--space-3)
    }

    .info-card img {
        width: fit-content;
        justify-self: left;
    }

    .desktop-customer-highlights {
        display: none;
    }

    .mobile-customer-highlights {
        display: flex;
    }

    .customer-highlights {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .customer-highlight {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "title"
            "body"
        ;
        gap: var(--space-2);
        column-gap: var(--space-2);
        padding: var(--space-3);

        background-color: var(--color-surface);
        border-radius: var(--radius);
        height: fit-content;
    }

    .customer-highlight img {
        width: fit-content;
        justify-self: left;
        height: 180px;
    }

    .customer-highlight__title {
        font-size: var(--fs-lg);
        margin: 0;
    }

    .customer-highlight__body {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .customer-highlight__body p {
        color: var(--color-text-muted);
        margin: 0;
    }

    .customer-highlight__body .btn--small {
        margin-top: var(--space-2);
        width: fit-content;
    }

}