/* Block: feature-cards */
.feature-cards {
    display: grid;
    gap: calc(26 * var(--tgc-u));
    max-width: var(--tgc-container);
    margin: calc(40 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter);
    list-style: none;
}

.feature-cards--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-cards--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-cards--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-cards--cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/*
 * Stagger: every other COLUMN drops, so the offset survives a second row.
 * The grid keeps room underneath for the overhang.
 */
.feature-cards--stagger {
    padding-bottom: calc(48 * var(--tgc-u));
}

.feature-cards--cols-2.feature-cards--stagger > .feature-card:nth-child(2n),
.feature-cards--cols-3.feature-cards--stagger > .feature-card:nth-child(3n + 2),
.feature-cards--cols-4.feature-cards--stagger > .feature-card:nth-child(4n + 2),
.feature-cards--cols-4.feature-cards--stagger > .feature-card:nth-child(4n),
.feature-cards--cols-5.feature-cards--stagger > .feature-card:nth-child(5n + 2),
.feature-cards--cols-5.feature-cards--stagger > .feature-card:nth-child(5n + 4) {
    transform: translateY(calc(48 * var(--tgc-u)));
}

@media (max-width: 1100px) {
    .feature-cards--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-cards--cols-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* The column maths above no longer matches, so the row runs flat. */
    .feature-cards--stagger {
        padding-bottom: 0;
    }

    /* Must outrank the nth-child offsets above, or the dropped cards run
       into the one below once the grid collapses. */
    .feature-cards.feature-cards--stagger > .feature-card:nth-child(n) {
        transform: none;
    }
}

@media (max-width: 900px) {
    .feature-cards--cols-3,
    .feature-cards--cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .feature-cards {
        gap: 16px;
        margin-top: 28px;
        padding: 0 20px;
    }

    .feature-cards--cols-2,
    .feature-cards--cols-3,
    .feature-cards--cols-4,
    .feature-cards--cols-5 {
        grid-template-columns: minmax(0, 1fr);
    }
}