.reference_list {
  margin: em(50px) 0;
  position: relative;
  z-index: 1;
  height: 0;
  padding-bottom: 34.6%;
  will-change: padding;
  transition: padding 0.5s $easeInOutCubic;
  & + .section__title {
    margin: 0;
    position: relative;
    top: em(-50px);
  }
  & + .section__title + * {
    margin-top: 0;
  }
  &[data-active] {
    padding-bottom: 75%;
    .reference_list__video__item {
      transform: translateY(-30%);
    }
    .reference_list__frame {
      transform: scale(0.3);
    }
    .reference_list__item__frame--close {
      opacity: 1;
    }
    @media screen and (max-width: $medium_breakpoint) {
      padding-bottom: 88.2%;
      .reference_list__frame {
        transform: scale(0.74);
      }
    }
  }
  @for $i from 0 through 2 {
    &[data-active="#{$i}"] {
      .reference_list__video__item.data_id_#{$i} {
        transform: none;
        pointer-events: all;
        &:before {
          display: none;
        }
        iframe {
          opacity: 1 !important;
          z-index: 5;
          transition: opacity 0.4s ease-in-out 0.3s;
        }
        & ~ .reference_list__video__item {
          transform: translateY(30%);
        }
      }
    }
  }
}

.reference_list__frame {
  position: relative;
  z-index: 1;
  transform: none;
  transition: transform 0.5s $easeInOutCubic;
  transform-origin: 0 0;
}

.reference_list__item__frame--close {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  .reference_list__item__image__main {
    background: $green;
    transition: transform 0.2s ease-in-out;
    transform: none;
    &:before, &:after {
      content: '';
      width: em(80px);
      height: em(10px);
      background: $white;
      display: block;
      border-radius: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: em(-40px);
      margin-top: em(-5px);
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
    @media screen and (max-width: $medium_breakpoint) {
      &:before, &:after {
        width: em(40px);
        height: em(6px);
        margin-left: em(-20px);
        margin-top: em(-3px);
      }
    }
  }
  .reference_list__item:hover {
    .reference_list__item__image__main {
      transform: rotate(90deg);
    }
  }
}

.reference_list__content {
  width: 100%;
  font-size: 0;
  white-space: nowrap;
}

.reference_list__item__frame {
  display: inline-block;
  margin: em(15px) 3.5% em(15px) 0;
  font-size: $default_font_size;
  width: 31%;
}

.reference_list__item {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  .video__play {
    position: absolute;
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
  }
  @media screen and (max-width: $medium_breakpoint) {
    .video__play {
      width: em(50px);
      height: em(50px);
      line-height: em(51px);
      svg {
        width: em(20px);
        height: em(20px);
      }
    }
  }
}

.reference_list__item__image__main {
  width: 100%;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  clip-path: circle(50% at 50% 50%);
}

.reference_list__item__image {
  position: absolute;
  top: -15%;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  @media screen and (max-width: $medium_breakpoint) {
    transform: initial !important;
    transition: none !important;
    will-change: initial !important;
  }
}

.reference_list__video__content {
  position: relative;
  width: 100%;
}

.reference_list__video__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
  transition: transform 0.5s $easeInOutCubic;
  pointer-events: none;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 10;
  }
}

.reference_list__videos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 15%;
  height: 100%;
  overflow: hidden;
  .video {
    margin: 0;
    iframe {
      height: 100%;
      z-index: 0;
      opacity: 0 !important;
      transition: opacity 0.2s ease-in-out 0s;
    }
    .video__thumbnail {
      display: none;
    }
  }
  @media screen and (max-width: $medium_breakpoint) {
    padding-top: 32%;
  }
}