/* Variabel global untuk kustomisasi */
:root {
  --total-items: 5; /* Jumlah total item */
  --animation-duration: 20s; /* Durasi animasi */
}

/* Container utama untuk scrolling */
.scorlling {
  width: 100%;
  max-width: 1536px;
  position: relative;
  height: 200px; /* Tinggi container */
  overflow: hidden;
  margin-top: 20px;

  /* Masking untuk memberikan efek fade di sisi kiri dan kanan */
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
}

/* Animasi untuk menggeser elemen ke kiri */
@keyframes scrollleft {
  to {
    left: -300px; /* Elemen akan bergerak ke kiri sejauh 200px */
  }
}

/* Gaya dasar untuk setiap item */
.item {
  width: 250px; /* Lebar setiap item */
  height: 100%; /* Tinggi mengikuti container */
  background-color: #fff; /* Warna latar belakang */
  border-radius: 6px; /* Membuat sudut melengkung */
  position: absolute; /* Posisi absolut untuk animasi */
  overflow: hidden;

  /* Posisi awal elemen di luar layar */
  left: max(calc(250px * (var(--total-items) - 1)), 100%);

  /* Pengaturan animasi */
  animation-name: scrollleft; /* Nama animasi */
  animation-duration: var(--animation-duration); /* Durasi animasi */
  animation-timing-function: linear; /* Kecepatan animasi konstan */
  animation-iteration-count: infinite; /* Animasi berjalan terus-menerus */
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pengaturan delay animasi untuk setiap item */
.item1 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 1) * -1);
}
.item2 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 2) * -1);
}
.item3 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 3) * -1);
}
.item4 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 4) * -1);
}
.item5 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 5) * -1);
}
/* .item6 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 6) * -1);
}
.item7 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 7) * -1);
}
.item8 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 8) * -1);
}
.item9 {
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 9) * -1);
} */

@media (max-width: 768px) {
  .item {
    width: 200px; /* Lebar setiap item */
    left: max(calc(200px * (var(--total-items) - 1)), 100%);
  }
  .item-right {
    width: 200px; /* Lebar setiap item */
    right: max(calc(200px * (var(--total-items) - 1)), 100%);
  }
}