.scroll-container,
.scroll-area {
  max-width: 850px;
  height: 300px;
}

.scroll-container {
  overflow: auto;
  scroll-snap-type: y proximity;
  height: 300px;
}

.scroll-area {
  scroll-snap-align: start;
}

.scroll-container,
.scroll-area {
  margin: 0 auto;
}

.scroll-area {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.scroll-container {
  /* Establecer la altura máxima y ancho máximo para mostrar el contenido */
  max-height: 100vh;
  max-width: 100vw;

  /* Asegurarse de que el contenido sea visible dentro del contenedor */
  overflow: auto;

  /* Ocultar la barra de desplazamiento en navegadores que la admiten */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

/* Personaliza la apariencia de la barra de desplazamiento para navegadores WebKit (por ejemplo, Chrome, Safari) */
.scroll-container::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.my-div {
  display: none;
}

.my-div2 {
  display: none;
}

.my-img {
  display: none;
}

.active {
  display: flex;
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.active2 {
  display: block;
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  padding-top: 5rem;
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}