/* ABOUTME: Styles for the stepped-cross masked image gallery section.
   ABOUTME: Handles folk-style stepped clip-path masks, single-row layout, and scroll-driven parallax. */

/* ===========================
   Section Wrapper
   =========================== */

.galeria {
  position: relative;
  z-index: 1;
  padding-block: 8em;
  overflow: hidden;
}

/* ===========================
   Image Row
   =========================== */

.galeria__row {
  display: flex;
  justify-content: center;
  gap: 2em;
  will-change: transform;
}

/* ===========================
   Pixel Diamond Masked Image
   =========================== */

/* 7-row pixel diamond: 1-2-3-4-3-2-1 blocks wide.
   Grid: 4 columns (each 25%), 7 rows (each ~14.29%). */

.galeria__item {
  flex: 0 0 auto;
  width: 28vw;
  height: 28vw;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cpolygon points='36 18 36 9 27 9 27 0 18 0 18 9 9 9 9 18 0 18 0 27 9 27 9 36 18 36 18 45 27 45 27 36 36 36 36 27 45 27 45 18 36 18' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cpolygon points='36 18 36 9 27 9 27 0 18 0 18 9 9 9 9 18 0 18 0 27 9 27 9 36 18 36 18 45 27 45 27 36 36 36 36 27 45 27 45 18 36 18' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.4) saturate(0.8);
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 768px) {
  .galeria__item {
    width: 40vw;
    height: 40vw;
  }
}