/* =========================================================================
   50-50, LEFT, IMAGE — Figma set 6417:57313 · 420 2135:19447
   · 1024 6417:57314 · 1440 2043:10121 · 1920 6417:57330
   The copy between two rules beside a photo, the two halves equal. On the
   420 frame the photo (square) comes first, the copy under it.
   ========================================================================= */

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

.s-why-effect {
  gap: var(--spacing-stack-xl);            /* 420: photo, then copy, stack-xl apart */
}
.s-why-effect__media {
  order: -1;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;                         /* Figma: square on the 420 frame */
  background: var(--color-black);
}
.s-why-effect__img {
  position: absolute;
  max-width: none;
  /* Figma's crop, kept as a zoom and a focus point */
  height: 148.33%; width: auto; min-width: 100%;
  top: -15.22%; left: 50%; translate: -50% 0;
}

.s-why-effect__copy {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-xl);
  width: 100%;
  padding-block: var(--spacing-stack-xl);
  border-block: 1px solid var(--color-black-20);
}
.s-why-effect__title,
.s-why-effect__body { width: 100%; }

/* ── 1024 up: copy and photo side by side, equal halves ────────────── */
@media (min-width: 1024px) {
  .s-why-effect {
    flex-direction: row;
    align-items: stretch;                  /* the photo is as tall as the copy */
    gap: var(--spacing-grid-gutter);
  }
  /* Both halves "fill" in Figma, which shares the room left after each
     frame's own padding: the photo frame carries 80 a side (raw, no
     token), the copy stack-l — so the photo is the wider half (628 / 548
     at 1440). content-box does the same sum here. */
  .s-why-effect__media {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 80px;
    aspect-ratio: auto;
  }
  .s-why-effect__img { height: 154.29%; top: -19.33%; translate: -50.9% 0; }
  .s-why-effect__copy {
    box-sizing: content-box;
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
    gap: var(--spacing-stack-l);
    padding: var(--spacing-section-gap) var(--spacing-stack-l);
  }
}