/* ============ ROTATING HEADER GRAPHIC ============ */

.reef-rotator {
  position: relative;
  width: 90%;
  margin: 0 auto;
  /* first slide is in normal flow and sets the height */
}

.reef-rotator .reef-intro-media {
  transition: opacity 1s ease;
}

.reef-rotator .reef-intro-media.is-stacked {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.reef-rotator .reef-intro-media.is-active {
  opacity: 1;
}