.collage-scroll * {
  box-sizing: border-box;
}

.collage-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: var(--gradient-9);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.collage-scroll .section {
  scroll-snap-align: center;
  margin: 4vmin 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.collage-scroll .container {
  width: 80vw;
  height: 50vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap, 1vmin);
}

.collage-scroll img {
  --brightness: 0.75;
  --grayscale: 1;
  transition: flex var(--transition, 0.5s), filter var(--transition, 0.5s);
  height: 100%;
  filter: grayscale(var(--grayscale)) brightness(var(--brightness));
  object-fit: cover;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-3, 12px); /* ✅ Rounded! */
  box-shadow: var(--shadow-3, 0 4px 12px rgba(0,0,0,0.1));
}


.collage-scroll img:hover {
  --brightness: 1.15;
  --grayscale: 0;
  flex: var(--magnifier, 6);
  z-index: 1;
}
.collage-scroll .container {
  border-radius: 16px;        /* or var(--radius-3) if defined */
  overflow: hidden;
  background: #fff;
  width: 100%;
}

.collage-scroll {
  overflow-y: hidden;
}

.collage-scroll .section {
  margin: 0 !important;
  padding: 0 !important;
}


.media.media-custom {
  padding-bottom: 0;
  margin-bottom: 0;
}
.collage-scroll .collage-container {
  display: flex;
  gap: var(--gap, 1vmin);
  width: 100%;
  height: 50vmin;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-3, 12px);
  box-shadow: var(--shadow-3, 0 4px 12px rgba(0,0,0,0.1));
}
.collage-gallery-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
}

.collage-gallery-wrapper .gallery {
  --size: min(60vmin, 400px);
  width: var(--size);
  height: var(--size);
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  background: #fff;
  box-shadow: 0 0 10px #0002, 0 20px 40px -20px #0004;
}
.collage-gallery-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
}

.collage-gallery-wrapper .gallery {
  --size: min(60vmin, 400px);
  width: var(--size);
  height: var(--size);
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  background: #fff;
  box-shadow: 0 0 10px #0002, 0 20px 40px -20px #0004;
}
@media (max-width: 768px) {
  .collage-scroll img.active {
    filter: grayscale(0) brightness(1.15);
  }
}

.collage-scroll img {
  filter: grayscale(1) brightness(0.75);
  transition: filter 0.5s ease, transform 0.5s ease;
}

/* Permanent color pentru imaginea activă */
.collage-scroll img.active {
  filter: grayscale(0) brightness(1.15);
  z-index: 1;
}

/* Hover (doar pe desktop, fără să afecteze .active) */
.collage-scroll img:hover {
  filter: grayscale(0) brightness(1.15);
  z-index: 2;
}