/* Panel triptychu — jedna tretina spoločnej fotky v pasparte ráme.
   Tri panely stoja vedľa seba v natívnom Gride; každý ukazuje svoju tretinu
   tej istej fotky, takže spolu skladajú jeden obraz.
   Vzhľad rámu nesie globálna trieda .fotoram (hrúbka, farba, tieň).
   Medzeru medzi panelmi číta skript z Gridu do --triptych-medzera. */

.triptych-panel {
  --triptych-okraj: var(--fotoram-okraj, 10px);

  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 373 / 560;
  will-change: transform, opacity;
}

/* Fotka je široká ako celý triptych (tri panely a dve medzery)
   a posunutá doľava podľa poradia panela. */
.triptych-panel img {
  position: absolute;
  top: var(--triptych-vrch, -21%);
  left: calc(
    var(--triptych-okraj) * -1
    - var(--triptych-cast, 0) * (100% + var(--triptych-okraj) * 2 + var(--triptych-medzera, 30px))
  );
  display: block;
  width: calc(300% + var(--triptych-okraj) * 6 + var(--triptych-medzera, 30px) * 2);
  max-width: none;
  height: auto;
}

@media (max-width: 767px) {
  .triptych-panel {
    --triptych-okraj: var(--fotoram-okraj-mobil, 12px);
  }
}