/* About Us (ET-14755). Figma: 27285:34289 in Section 22 (28836:80261).

   The page is component composition, so the only thing here is the one join the components cannot
   make between themselves: "What guides us" (27309:41840) closes its card grid with a centred text
   link that the frames draw outside the grid's container, 32 below it.

   The link is a sibling of the grid rather than a prop on it, so the grid's own bottom padding
   would sit between the two. Zeroing it moves that padding onto the link's block, which then
   carries the section's closing space -- 96 wide, 48 narrow, the same pair the grid drops. */
.about__cards .card-grid {
    padding-bottom: 0;
}

.about__cards-cta {
    padding-block: var(--space-32) var(--space-48);
    text-align: center;
}

@media (min-width: 834px) {
    .about__cards-cta {
        padding-bottom: var(--space-96);
    }
}

/* The list panels between 834 and 1200: still side by side, but with half the room around and
   between the columns -- 40 padding and a 48 gap, against the 80 and 96 the component draws for
   wide screens. Below 834 the component's own stacked rules apply, and "Avicenna today" keeps
   its 40 gap, which its stack modifier sets on a stronger selector than this one. */
@media (min-width: 834px) and (max-width: 1199.95px) {
    .list-panel {
        padding: var(--space-40);
    }

    .list-panel__main {
        gap: var(--space-48);
    }

    /* "Our purpose" breaks as Using everyday / technology to help / researchers understand /
       people in everyday life. Any measure from 339 (the longest of those lines) to 383 (where
       "Using everyday technology" would fit) gives that, and the md grid's four columns land in
       it. It is the page's one teal side-by-side panel; the blue and stacked ones keep their
       own wrapping. Under about 900 the column itself is narrower than 339, so it runs to five
       lines there whatever the measure. */
    .list-panel:not(.list-panel--blue, .list-panel--stack) .list-panel__headline {
        max-width: var(--grid-md-col-4);
    }
}