#highlights {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: auto;
}

/* Keep only the first slide visible until Slick takes over the layout. */
#highlights:not(.slick-initialized) > :not(:first-child) {
  display: none;
}

#sliderImages {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: auto;
}

.highlight {
  position: relative;
  width: 100%;
  display: block;
  height: auto;
  object-fit: cover;
}

#highlights .highlight iframe,
#highlights .highlight.videoContainer,
#highlights .highlight.videoContainer .videoComponentPlaceholder {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

#highlights .highlight.videoContainer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .highlight {
    object-fit: contain;
    height: auto;
  }
}