.avatar-rotator {
  position: relative;
  display: grid;
  overflow: hidden;
}

.avatar-rotator_slide {
  grid-area: 1 / 1;
  z-index: 1;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition-property: opacity, visibility;
  transition-duration: 900ms;
  transition-timing-function: ease;
}

.avatar-rotator_slide.is-active {
  z-index: 3;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.avatar-rotator_slide.is-leaving {
  z-index: 2;

  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

.avatar-rotator .hero_badge-avatar-wrapper {
  opacity: 0.12;
  transform: translateY(-16px);

  transition-property: opacity, transform;
  transition-duration: 0ms;
  transition-timing-function: ease-out;
  transition-delay: 0ms;

  will-change: opacity, transform;
}

.avatar-rotator_slide.is-active .hero_badge-avatar-wrapper {
  opacity: 1;
  transform: translateY(0);

  transition-duration: 700ms;
  transition-delay: var(--avatar-delay, 0ms);
}

.avatar-rotator_slide.is-leaving .hero_badge-avatar-wrapper {
  opacity: 0;
  transform: translateY(0);

  transition-duration: 600ms;
  transition-delay: 0ms;
}

/* Tablet and mobile */
@media screen and (max-width: 991px) {
  .avatar-rotator_slide {
    transition: none !important;
  }

  .avatar-rotator_slide:not(:first-child) {
    display: none !important;
  }

  .avatar-rotator_slide:first-child {
    z-index: 3;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }

  .avatar-rotator .hero_badge-avatar-wrapper {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}