/* 5. Warum – editorial archive photos in justified rows, three benefits.
   Each item's flex-grow equals its photo's aspect ratio (--ratio, set in the HTML),
   so every photo in a row ends up the same height without cropping. */
.archive { display: flex; flex-direction: column; gap: var(--space-6); }
.archive__row { display: flex; gap: var(--space-5); align-items: flex-start; }
.archive__item {
  flex: var(--ratio) 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.archive__item .media { aspect-ratio: var(--ratio); border-radius: var(--radius-md); }

.benefits {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: var(--border-hairline) solid var(--line);
}
.benefits__num { display: block; color: var(--accent-text); font-family: var(--font-display); }
.benefits__title { margin-top: var(--space-3); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body-strong); }
.benefits__item p { margin-top: var(--space-2); }

/* Mobile: two-column grid; the two near-square photos sit side by side */
@media (max-width: 767px) {
  .archive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); align-items: start; }
  .archive__row { display: contents; }
  .archive__item { grid-column: 1 / -1; }
  .archive__item--car, .archive__item--family { grid-column: auto; }
  .archive__item--soldiers { order: 1; }
  .archive__item--car { order: 2; }
  .archive__item--family { order: 3; }
  .archive__item--car .media, .archive__item--family .media { aspect-ratio: 1; }
  .archive__item--swissair { order: 4; }
  .archive__item--house { order: 5; }
  .benefits { grid-template-columns: 1fr; margin-top: var(--space-8); }
}

/* Hover: the photo leans in slightly */
@media (hover: hover) {
  .archive__item .media img { transition: transform var(--duration-slow) var(--ease-out); }
  .archive__item:hover .media img { transform: scale(1.03); }
}