/* SIIK Artist Strip: two identical tracks slide left by their own width, so the loop never jumps */
.sas {
  --sas-item: 150px;
  --sas-photo: 73px;
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sas-track {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: sas-scroll var(--sas-duration, 60s) linear infinite;
}
.sas:hover .sas-track { animation-play-state: paused; }
@keyframes sas-scroll { to { transform: translateX(-100%); } }

.sas-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: var(--sas-item);
  margin: 0;
  padding: 0 4px;
  text-align: center;
}
.sas-img {
  display: block;
  width: var(--sas-photo);
  height: var(--sas-photo);
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}
.sas-name {
  font-family: Poppins, system-ui, sans-serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: #F4F4F8;
  white-space: nowrap;
}
.sas-empty { margin: 0; opacity: .6; }

@media (min-width: 2400px) { .sas { --sas-item: 190px; --sas-photo: 115px; } }
@media (max-width: 1024px) { .sas { --sas-item: 130px; --sas-photo: 83px; } .sas-name { font-size: 15px; } }
@media (max-width: 767px)  { .sas { --sas-item: 120px; --sas-photo: 73px; } .sas-name { font-size: 14px; } }

/* no motion: a row you can swipe instead */
@media (prefers-reduced-motion: reduce) {
  .sas { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .sas-track { animation: none; }
  .sas-track + .sas-track { display: none; }
}