.scroll-section {
	height: 400vh;
	position: relative;
	width: 100vw;
	margin-left: -50px;
	margin-bottom: 200px;
}

.scroll-section__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.scroll-section__track {
	display: grid;
	grid-template-rows: repeat(10, 90px);   
	grid-auto-columns: 90px;              
	grid-auto-flow: column;
	gap: 18px;
	width: max-content;
	will-change: transform;
}

.image-slide{
	border-radius: 3px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	transform: translate(var(--tx, 0), var(--ty, 0));
}

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

/* ============================
   PATRÓN COLLAGE (se repite)
   Cada 12 imágenes vuelve a empezar
   ============================ */

/* 1: grande vertical */
.image-slide:nth-child(12n + 1){
    grid-column: auto / span 3;
    grid-row: 6 / span 5;
    --tx: 0px;
    z-index: 3;
}

/* 2: pequeña arriba */
.image-slide:nth-child(12n + 2){
    grid-column: auto / span 3;
    grid-row: 3 / span 4;
    --ty: 20px;
    z-index: 2;
    --tx: -100px;
}

/* 3: mediana centro */
.image-slide:nth-child(12n + 3){
	grid-column: auto / span 2;
    grid-row: 2 / span 3;
    --tx: 0px;
    z-index: 4;
    --ty: 0px;
}

/* 4: pequeña “flotante” */
.image-slide:nth-child(12n + 4){
	grid-column: auto / span 3;
    grid-row: 5 / span 4;
    --tx: 0px;
    --ty: 70px;
    z-index: 6;
}

/* 5: mediana abajo izquierda */
.image-slide:nth-child(12n + 5){
  grid-column: auto / span 3;
  grid-row: 7 / span 6;
  --ty: -10px;
  z-index: 2;
}

/* 6: grande horizontal */
.image-slide:nth-child(12n + 6){
  grid-column: auto / span 3;
  grid-row: 1 / span 9;
  --tx: 15px;
  z-index: 5;
}

/* 7: mini arriba */
.image-slide:nth-child(12n + 7){
  grid-column: auto / span 2;
  grid-row: 2 / span 5;
  --tx: 8px;
  z-index: 7;
}

/* 8: vertical media */
.image-slide:nth-child(12n + 8){
  grid-column: auto / span 2;
  grid-row: 4 / span 7;
  --ty: 10px;
  z-index: 3;
}

/* 9: horizontal media */
.image-slide:nth-child(12n + 9){
  grid-column: auto / span 3;
  grid-row: 6 / span 7;
  --tx: -15px;
  z-index: 4;
}

/* 10: pequeña abajo */
.image-slide:nth-child(12n + 10){
  grid-column: auto / span 2;
  grid-row: 8 / span 5;
  --ty: -5px;
  z-index: 2;
}

/* 11: grande vertical derecha */
.image-slide:nth-child(12n + 11){
  grid-column: auto / span 3;
  grid-row: 2 / span 8;
  --tx: 20px;
  z-index: 3;
}

/* 12: pequeña “encima” */
.image-slide:nth-child(12n + 12){
  grid-column: auto / span 2;
  grid-row: 5 / span 6;
  --tx: 25px;
  --ty: -20px;
  z-index: 8;
}

/*KENNETH */
.image-slide:nth-child(12n + 3)
 {
    grid-column: auto / span 2;
    grid-row: 2 / span 3;
    --tx: 0px;
    z-index: 4;
    --ty: 0px;
    width: 150px;
    height: 250px;
}

.image-slide:nth-child(12n + 5) {
    grid-column: auto / span 2;
    grid-row:  4 / span 2;
    --ty: 95px;
    --tx: -60px;
    height: 250px;
    z-index: 6;
}

.image-slide:nth-child(12n + 6) {
    grid-column: auto / span 2;
    grid-row: 1 / span 4;
    --tx: -40px;
    z-index: 5;
    --ty: 80px;
}


.image-slide:nth-child(12n + 7)
 {
    grid-column: auto / span 4;
    grid-row: 6 / span 5;
    --tx: 0px;
    z-index: 7;
    --ty: 10px;
}

.image-slide:nth-child(12n + 8)
 {
    grid-column: auto / span 5;
    grid-row: 3 / span 6;
    --ty: 0px;
    --tx: -190px;
    z-index: 7;
}

.image-slide:nth-child(12n + 9)
 {
    grid-column: auto / span 3;
    grid-row: 3 / span 6;
    --tx: -160px;
    --ty: 150px;
    z-index: 4;
}
.image-slide:nth-child(12n + 10) {
    grid-column: auto / span 4;
    grid-row: 6 / span 6;
    --ty: -10px;
    --tx: -70px;
    z-index: 2;
}

.image-slide:nth-child(12n + 11)
 {
    grid-column: auto / span 3;
    grid-row: 2 / span 4;
    --tx: 100px;
    --ty: 100px;
    z-index: 1;
}

@media (max-width: 1199px){
	.scroll-section{
		margin-left: -30px;
	}
}

@media (max-width: 991px){
	
	.scroll-section {
		margin-bottom: 150px;
		margin-left: -20px;
	}
}

@media (max-width: 767px){
	
	.scroll-section {
		margin-bottom: 80px;
	}
}