/* Horizontal scroll parallax — centered, above "View Full Gallery" */
#gallery.vaux-sliding-only {
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

#gallery.vaux-sliding-only [class*="columns-"],
#gallery.vaux-sliding-only .break-inside-avoid {
  display: none !important;
}

/* Reserve space before JS/images load — prevents page jump */
#gallery.vaux-sliding-only .vaux-sliding-wrap,
#gallery.vaux-sliding-active .vaux-sliding-wrap {
  min-height: calc(
    2 * (clamp(168px, 19vw, 280px) * 4 / 3) +
    clamp(1rem, 2.5vw, 1.75rem)
  );
}

.vaux-sliding-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  contain: layout style;
}

.vaux-sliding-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  width: max-content;
  margin: 0 auto;
  will-change: transform;
  min-height: calc(clamp(168px, 19vw, 280px) * 4 / 3);
}

.vaux-sliding-item {
  flex: 0 0 auto;
  width: clamp(168px, 19vw, 280px);
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
  background-size: 200% 100%;
  line-height: 0;
  contain: strict;
}

.vaux-sliding-item.is-loading {
  animation: vaux-shimmer 1.4s ease-in-out infinite;
}

.vaux-sliding-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.vaux-sliding-item:not(.is-loading) img,
.vaux-sliding-item img.is-ready {
  opacity: 1;
}

@keyframes vaux-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (max-width: 640px) {
  .vaux-sliding-item {
    width: clamp(120px, 22vw, 168px);
  }

  #gallery.vaux-sliding-only .vaux-sliding-wrap,
  #gallery.vaux-sliding-active .vaux-sliding-wrap {
    min-height: calc(
      2 * (clamp(120px, 22vw, 168px) * 4 / 3) +
      clamp(1rem, 2.5vw, 1.75rem)
    );
  }

  .vaux-sliding-row {
    min-height: calc(clamp(120px, 22vw, 168px) * 4 / 3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vaux-sliding-row {
    transform: none !important;
  }

  .vaux-sliding-item.is-loading {
    animation: none;
  }
}