.image-container {
  width: 100%; /* El contenedor ocupa el 100% del ancho del dispositivo */
  display: block; /* Asegura que el contenedor ocupe el ancho completo */
}

.image-container img {
  width: 100%; /* Las imágenes se ajustan al 100% del ancho del dispositivo */
  height: auto; /* Mantiene las proporciones originales de la imagen */
  object-fit: contain; /* Asegura que la imagen se vea completa, sin recorte ni distorsión */
  display: block; /* Hace que las imágenes se apilen una debajo de la otra */
}

.elcontador{
  width: 100%; /* El contenedor ocupa el 100% del ancho del dispositivo */
  display: block; /* Asegura que el contenedor ocupe el ancho completo */
}

@media (min-width: 768px) {
  .image-container img {
    max-width: 400px; /* Ancho máximo de las imágenes en pantallas grandes */
    margin: 0 auto; /* Centra las imágenes horizontalmente */
  }

  .elcontador{
        max-width: 400px; /* Ancho máximo de las imágenes en pantallas grandes */
    margin: 0 auto; /* Centra las imágenes horizontalmente */
  }

  /* Estilo para la tabla con el contador */
  table {
    width: auto; /* Establece un ancho automático */
    max-width: 400px; /* Ancho máximo para que no ocupe todo el ancho en escritorio */
    margin: 0 auto; /* Centra la tabla en la pantalla */
    border-collapse: collapse;
  }

  table img.countdown-img {
    width: 100%; /* Mantén las proporciones de la imagen dentro de la tabla */
    height: auto;
  }

  table td {
    padding: 20px;
    text-align: center;
  }
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* Fondo blanco, podés cambiar */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* siempre arriba */
}

/* Spinner animado */
.spinner {
  position: relative;
  width: 50px;
  height: 80px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner::before,
.spinner::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 25px solid transparent;
  animation: sand 2s infinite ease-in-out;
}

.spinner::before {
  border-bottom-color: #30318c;
  top: 0;
  transform-origin: center bottom;
}

.spinner::after {
  border-top-color: #30318c;
  bottom: 0;
  transform-origin: center top;
}

@keyframes sand {
  0%, 100% {
    transform: scaleY(1);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.2);
    opacity: 0.5;
  }
}