.productos{

  width:100%;

  height:100vh;

  display:grid;

  grid-template-columns:
  2fr 1fr;

  background:#111;

}

/* FONDOS */

.bg-hielo{

  background:
  linear-gradient(
    135deg,
    #ff512f,
    #f09819
  );

}

.bg-macarena{

  background:
  linear-gradient(
    135deg,
    #fc466b,
    #3f5efb
  );

}

.bg-tornado{

  background:
  linear-gradient(
    135deg,
    #654ea3,
    #eaafc8
  );

}

.bg-especial{

  background:
  linear-gradient(
    135deg,
    #11998e,
    #38ef7d
  );

}

.bg-yanacha{

  background:
  linear-gradient(
    135deg,
    #fbc2eb,
    #ffdde1
  );

}

/* IMAGEN */

.producto-preview{

  position:relative;

  width:100%;

  height:100vh;

  overflow:hidden;

  display:flex;

  justify-content:center;

  align-items:center;

  transition: background 2s ease;

}

.producto-preview img{

  max-width:85%;

  max-height:85%;

  width:auto;

  height:auto;

  object-fit:contain;

  transition:0.6s ease;

  filter:
  drop-shadow(
    0 40px 60px rgba(0,0,0,0.45)
  );

}

.producto-preview img:hover{

  transform:scale(1.03);

}

/* LISTA */

.productos-list{

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:80px;

}

/* ITEM */

.producto-item{

  font-size:40px;

  color:white;

  margin:20px 0;

  cursor:pointer;

  transition:0.3s;

  opacity:0.4;

}

/* HOVER */

.producto-item:hover{

  opacity:1;

  transform:translateX(20px);

}

/* ACTIVO */

.producto-item.active{

  opacity:1;

}

/* RESPONSIVE */

@media(max-width:768px){

  .productos{

    grid-template-columns:1fr;

    height:auto;

  }

  /* IMAGEN */

  .producto-preview{

    height:60vh;

  }

  /* LISTA */

  .productos-list{

    flex-direction:row;

    overflow-x:auto;

    gap:30px;

    padding:30px 20px;

    justify-content:flex-start;

  }

  /* SCROLL OCULTO */

  .productos-list::-webkit-scrollbar{

    display:none;

  }

  /* ITEMS */

  .producto-item{

    flex:none;

    font-size:28px;

    margin:0;

    white-space:nowrap;

  }

}