.mc-accordion {
  $slide-duration: 650ms;

  position: relative;

  &--1x1,
  &--square {
    @include aspect-ratio(1, 1);
  }

  &--2x3 {
    @include aspect-ratio(2, 3);
  }

  &--3x4,
  &--poster {
    @include aspect-ratio(3, 4);
  }

  &--4x3,
  &--video {
    @include aspect-ratio(4, 3);
  }

  &--9x16,
  &--portrait {
    @include aspect-ratio(9, 16);
  }

  &--16x9,
  &--widescreen-video {
    @include aspect-ratio(16, 9);
  }

  &--21x9,
  &--cinematic {
    @include aspect-ratio(21, 9);
  }

  &--active {
    .mc-accordion__item {
      opacity: 0.5;

      &--active {
        opacity: 1;
      }
    }
  }

  &__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
  }

  &__item {
    cursor: pointer;
    position: relative;
    z-index: 0;
    flex: 1;
    padding: 0 12px;
    overflow: hidden;

    transition:
      flex $slide-duration ease,
      opacity $slide-duration ease;

    &--active {
      flex-grow: 10;
    }

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }

  .mc-animation--show {
    transition-delay: 0ms;

    &.mc-animation--animating {
      transition-delay: $slide-duration;
    }
  }

  .mc-animation--hide {
    transition-delay: $slide-duration;

    &.mc-animation--animating {
      transition-delay: 0ms;
    }
  }
}