/* =========================================================================
   50-50, LIST, IMAGE — Figma set 6417:1084 · 420 2113:18556 · 1024 6417:1085
   · 1440 2043:9973 · 1920 6417:1147. Two sections wear it (why-pace,
   why-partner); the Why frames place why-pace on Black 10 and
   why-partner on Black 5 (the ground is each section's class).
   A heading block, then a photo beside a list of three Cells (icon, title,
   copy, a rule under each). Stacked on the 420 frame: photo, then list.
   ========================================================================= */

.s-why-list :is(h2, h3, p)[class*="t-"] { margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap); }

/* ── heading block ─────────────────────────────────────────────────── */
.s-why-list__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-xl);            /* 420: stack-xl; wider: stack-l */
  width: 100%;
}
.s-why-list__eyebrow { gap: var(--spacing-inline-s); }
.s-why-list__title,
.s-why-list__lede { width: 100%; max-width: 984px; }   /* Figma: max 984 */

/* ── body ──────────────────────────────────────────────────────────── */
.s-why-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-section-gap);         /* 420: photo and list are two rows of the section */
  width: 100%;
}
.s-why-list__media {
  position: relative;
  overflow: hidden;
  height: 360px;                           /* Figma: fixed 360 on the 420 frame */
  background: var(--color-black);
}
.s-why-list__img { position: absolute; max-width: none; }
/* Figma crops each photo in its box. The crop is kept as a zoom and a
   focus point (not Figma's raw percentages, which stretch the picture
   when the box changes shape between frames). */
.s-why-list__img--pace { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-why-list__img--partner {
  height: 123.04%; width: auto; min-width: 100%;
  top: -18.4%; left: 50%; translate: -59.3% 0;
}

.s-why-list__cells {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-black-20);
}
.s-why-list__cell {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-xl);            /* 420: icon, title and copy stack-xl apart */
  padding-block: var(--spacing-stack-xl);
  border-bottom: 1px solid var(--color-black-20);
}
.s-why-list__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xl);
  width: 100%;
}
.s-why-list__name { width: 100%; }

/* Figma's line icons: 32 on the 420 and 1024 frames, 44 on 1440 and
   1920. Some are drawn mirrored; two overhang their box by a stroke. */
.s-why-list__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
}
.s-why-list__icon.is-flipped { scale: -1 1; }
.s-why-list__icon-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.s-why-list__icon-img--book { inset: auto; left: -1.705%; top: -1.705%; width: 103.41%; height: 105.11%; }
.s-why-list__icon-img--db   { inset: auto; left: -1.705%; top: 0;       width: 103.41%; height: 101.7%; }

/* ── 1024 up: photo beside the list ─────────────────────────────────── */
@media (min-width: 1024px) {
  .s-why-list__head { gap: var(--spacing-stack-l); }

  .s-why-list__body {
    flex-direction: row;
    align-items: stretch;                  /* the photo is as tall as the list */
    gap: var(--spacing-grid-gutter);
  }
  .s-why-list__media { flex: none; width: 451px; height: auto; }   /* Figma: fixed 451 / 650 / 780 */
  .s-why-list__img--partner { height: 124.86%; top: -18.86%; translate: -59.8% 0; }
  .s-why-list__cells { flex: 1 1 0; min-width: 0; }
  .s-why-list__cell {
    gap: var(--spacing-stack-l);
    padding: var(--spacing-stack-l);
  }
  .s-why-list__text { gap: var(--spacing-stack-m); }
  /* the first Cell groups its icon with the copy (stack-m under the icon,
     not stack-l) in a box Figma fixes at 160 */
  .s-why-list__cell:first-child {
    gap: var(--spacing-stack-m);
    min-height: calc(160px + 2 * var(--spacing-stack-l));
  }
}
@media (min-width: 1392px) {
  .s-why-list__media { width: 650px; }
  .s-why-list__icon { width: 44px; height: 44px; }
}
@media (min-width: 1920px) {
  .s-why-list__media { width: 780px; }
}