:root {
  --slide-duration: 4s;     /* tiempo por slide */
  --slide-count: 3;         /* set by JS */
  --cycle: calc(var(--slide-duration) * var(--slide-count)); /* set by JS */
}
.slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: auto 1440 / 231;
  overflow: hidden;
  isolation: isolate;
}
.slideshow__media {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height 110%;
  display: block;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  animation: slideshow__crossfade var(--cycle) linear infinite;
  will-change: opacity;
}
@keyframes slideshow__crossfade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .slideshow__media {
    animation: none;
    opacity: 1;
  }
  .slideshow__media:not(:first-child) {
    display: none;
  }
}
@media (max-width: 992px) {
  .slideshow {
    width: 1314px;
    float: right;
  }
}