/* Original desktop cards: 210px. Enlarged cards: 273px (x1.3).
 * Use layout dimensions so the artwork and its text stay inside each link. */
body.home .entry-content .wnh3-home-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 26px !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(1469px, calc(100vw - 48px)) !important;
    max-width: none !important;
    margin: 32px 0 0 !important;
    padding: 0;
    box-sizing: border-box;
}

body.home .entry-content .wnh3-home-grid > .wnh3-home-card {
    flex: 0 0 273px;
    width: 273px !important;
    max-width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    box-sizing: border-box;
    container-type: inline-size;
    grid-column: auto !important;
}

/* Some cards contain their title in the image; others use HTML text.
 * Scale that HTML text with the card so the five cards stay consistent. */
body.home .entry-content .wnh3-home-grid .wnh3-card-title {
    font-size: clamp(13px, 8.57143cqw, 23.4px);
}
body.home .entry-content .wnh3-home-grid .wnh3-card-subtitle {
    font-size: clamp(10px, 5.71429cqw, 15.6px);
}
body.home .entry-content .wnh3-home-grid .wnh3-card-arrow {
    font-size: clamp(20px, 11.90476cqw, 32.5px);
}

/* Three cards + two centered cards when five enlarged cards cannot fit. */
@media (min-width: 901px) and (max-width: 1516px) {
    body.home .entry-content .wnh3-home-grid {
        width: min(871px, calc(100vw - 48px)) !important;
    }
    body.home .entry-content .wnh3-home-grid > .wnh3-home-card {
        flex-basis: calc((100% - 52px) / 3);
        width: calc((100% - 52px) / 3) !important;
    }
}

/* Keep two columns on smaller screens; center the fifth card. */
@media (max-width: 900px) {
    body.home .entry-content .wnh3-home-grid {
        width: min(780px, calc(100vw - 32px)) !important;
        gap: 20.8px !important;
    }
    body.home .entry-content .wnh3-home-grid > .wnh3-home-card {
        flex-basis: calc((100% - 20.8px) / 2);
        width: calc((100% - 20.8px) / 2) !important;
    }
}