.slider-container {
  overflow: hidden;
  white-space: normal;
  /* position: relative; */
  width: 100%;
  /* background: #f8f9fa; */ /* Voliteľné: svetlé pozadie */
  padding: 20px 0;
}

.slider-track {
  display: inline-flex;
  align-items: stretch;
  gap: 30px; /* Medzera medzi obrázkami */
  animation: scroll 20s linear infinite;
}

/* Animácia plynulého posunu o polovicu celkovej dĺžky */
/* @@ Pre Razor, ze je to ciste CSS, nie C# kod */
/*@@keyframes scroll {*/
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-20%);
  }

  100% {
    transform: translateX(0%);
  }
}

/* Zastavenie animácie pri prejdení myšou (voliteľné) */
.slider-container:hover .slider-track {
  animation-play-state: paused;
}

.slider-track .card {
  height: 450px; /* Nastav si požadovanú výšku obrázkov */
  width: 400px;
  white-space: normal;
  flex-shrink: 0; /* Zabrani deformacii karty */
}