/* Those Faces — Figma main gallery (node 710:6707) */

.faces-gallery {
  width: 100%;
}

.faces-stack {
  width: 100%;
}

.main-sec > .faces-stack.faces-row:last-child,
.main-sec > figure.faces-fig:last-child {
  margin-bottom: 0;
}

.faces-row {
  display: grid;
  gap: var(--spacing-m);
  width: 100%;
  align-items: start;
}

.faces-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

/*
 * Pairs 2&3, 8&9 — equal row height, cover crop.
 * Beats globals `.main-content img { height: auto }` via extra classes.
 */
.main-content .faces-gallery .faces-row-2 .faces-fig {
  position: relative;
  overflow: hidden;
  min-height: min(62vw, 624px);
}

.main-content .faces-gallery .faces-row-2 .faces-fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.main-content .faces-gallery .faces-row-2 .faces-fig.faces-h-624 {
  min-height: min(62vw, 624px);
}

/* Pairs 5&6 — asym, same height */
.main-content .faces-gallery .faces-row-asym .faces-fig {
  position: relative;
  overflow: hidden;
  min-height: min(72vw, 726px);
}

.main-content .faces-gallery .faces-row-asym .faces-fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.main-content .faces-gallery .faces-row-asym .faces-fig.faces-h-726 {
  min-height: min(72vw, 726px);
}

/* Pairs 12&13, 16&17 — full main width, equal columns, same 493:648 crop */
.main-content .faces-gallery .faces-row-fixed-pair .faces-fig {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 493 / 648;
}

.main-content .faces-gallery .faces-row-fixed-pair .faces-fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.main-content .faces-gallery .faces-row-fixed-pair .faces-fig.faces-h-648 {
  min-height: 0;
}

.faces-fig {
  margin: 0;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.faces-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faces-h-624 {
  min-height: min(62vw, 624px);
}

.faces-h-677 {
  min-height: min(67vw, 677px);
}

.faces-h-726 {
  min-height: min(72vw, 726px);
}

.faces-h-755 {
  min-height: min(75vw, 755px);
}

.faces-h-450 {
  min-height: min(45vw, 450px);
}

.faces-h-648 {
  min-height: min(65vw, 648px);
}

.faces-h-531 {
  min-height: min(53vw, 531px);
}

.faces-w-493 {
  max-width: 493px;
}

.faces-fig-wide {
  width: 100%;
}

@media screen and (max-width: 810px) {
  .faces-row-2,
  .faces-row-asym,
  .faces-row-fixed-pair {
    grid-template-columns: 1fr;
  }

  .faces-w-493 {
    max-width: none;
  }

  .main-content .faces-gallery .faces-row-2 .faces-fig,
  .main-content .faces-gallery .faces-row-2 .faces-fig.faces-h-624,
  .main-content .faces-gallery .faces-row-asym .faces-fig,
  .main-content .faces-gallery .faces-row-asym .faces-fig.faces-h-726 {
    min-height: min(70vw, 420px);
  }

  .main-content .faces-gallery .faces-row-fixed-pair .faces-fig {
    max-width: none;
    max-height: none;
  }

  .faces-h-624,
  .faces-h-677,
  .faces-h-726,
  .faces-h-755,
  .faces-h-450,
  .faces-h-648,
  .faces-h-531 {
    min-height: 220px;
  }
}