/* Full-bleed is provided by the unconstrained content area of the "Full Width"
   page template — the section fills its container at 100% width. No width:100vw
   (which counts the scrollbar gutter and caused horizontal overflow). */

/* Card grid: centered flex-wrap. Every card has the SAME fixed width regardless
   of how many are added; flex-wrap decides how many fit per row for the current
   viewport, and justify-center centers any partial row instead of stretching the
   cards (a CSS grid would widen them). flex-grow is 0 (the initial value), so
   cards never expand past their fixed width. The 1.5rem gap matches Tailwind's
   gap-6 scale. At the max container width (max-w-7xl) four cards fit per row. */
.le-service-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

/* Mobile: one full-width card per row. min-height gives a taller default
   proportion closer to the design; cards still grow past it when their content
   is longer, and align-items:stretch keeps every card in a row equal height. */
.le-service-cards-grid > * {
    flex: 0 1 100%;
    max-width: 100%;
    min-height: 23.75rem;
}

/* From tablet up: fixed card width; the number per row follows from how many
   fit in the available space. 17.5rem (280px) yields four per row inside
   max-w-7xl. */
@media (min-width: 768px) {
    .le-service-cards-grid > * {
        flex-basis: 17.5rem;
    }
}