.video-content-v2 {
  position: relative;
  width: 100%;
  padding: 40px $gutter 0;
  margin: 80px 0;

  @include md {
    padding: 0;
  }

  @include sm {
    margin: 50px 0;
  }

  &__wrapper {
    width: 100%;
    max-width: $projects-detail-width;
    margin: 0 auto;

    @include md {
      margin-top: -52px;
    }
  }

  &__container {
    width: 100%;
    position: relative;
    min-height: 483px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 40px;

    @include md {
      flex-direction: column;
      padding-right: 0;
    }
  }

  &__background {
    width: calc(100% - 86px);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    background-color: $background-blue;

    &.orange {
      background-color: $topic-orange;
    }

    &.yellow {
      background-color: $topic-yellow;
    }

    &.blue {
      background-color: $topic-blue;
    }

    &.green {
      background-color: $topic-green;
    }

    &.primary {
      background-color: $primary-color;
    }

    &.secondary {
      background-color: $secondary-color;
    }

    &.vivid-blue {
      background-color: $blue;
    }

    @include md {
      width: 100%;
      display: none;
    }

    .background-wrapper & {
      background-color: transparent;
    }
  }

  &__media-container {
    z-index: 1;
    position: absolute;
    height: 100%;
    width: 70%;
    top: -40px;
    left: 0;
    cursor: pointer;

    @include md {
      position: relative;
      top: unset;
      width: calc(100% - 48px);
      margin: 0 auto;
      bottom: -52px;
    }
  }

  &__media-video {
    @include image-aspect-ratio(100%, 61.2%);

    pointer-events: none;
    z-index: 0;
  }

  &__play-button {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 2;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: url("../assets/img/svg/ico_play.svg") no-repeat center center $white;
    background-size: 38px 38px;
    pointer-events: none;

    @include md {
      top: 0;
      transform: translateY(-50%);
      left: 24px;
      width: 72px;
      height: 72px;
      background-size: 21px 21px;
    }
  }

  &__image {
    @include image-aspect-ratio(100%, 61.2%);

    pointer-events: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }

  &__background-media {
    width: 26%;
    max-width: 208px;
    height: 100%;
    position: absolute;
    top: 40px;
    right: 0;
    pointer-events: none;
    z-index: 1;
    background-color: rgba($color: $background-blue, $alpha: 0.8);

    &.orange {
      background-color: rgba($color: $topic-orange, $alpha: 0.8);
    }

    &.yellow {
      background-color: rgba($color: $topic-yellow, $alpha: 0.8);
    }

    &.blue {
      background-color: rgba($color: $topic-blue, $alpha: 0.8);
    }

    &.green {
      background-color: rgba($color: $topic-green, $alpha: 0.8);
    }

    &.primary {
      background-color: rgba($color: $primary-color, $alpha: 0.8);
    }

    &.secondary {
      background-color: rgba($color: $secondary-color, $alpha: 0.8);
    }

    &.vivid-blue {
      background-color: rgba($color: $blue, $alpha: 0.8);
    }

    @include md {
      width: 100%;
      max-width: 100%;
      height: 52px;
      top: unset;
      bottom: 0;
      left: 0;
    }
  }

  &__info {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 36.5%;

    &.primary {
      .rich-content-system * {
        color: $white;
      }
    }

    &.orange {
      color: $primary-color;
    }

    &.yellow {
      color: $primary-color;
    }

    &.blue {
      color: $primary-color;
    }

    &.green {
      color: $white;
    }

    &.primary {
      color: $white;
    }

    &.secondary {
      color: $primary-color;
    }

    &.vivid-blue {
      color: $primary-color;
    }

    @include md {
      width: 100%;
      max-width: 100%;
      background-color: $background-blue;
      padding: 76px 48px 48px;
      z-index: 0;

      &.orange {
        background-color: $topic-orange;
      }

      &.yellow {
        background-color: $topic-yellow;
      }

      &.blue {
        background-color: $topic-blue;
      }

      &.green {
        background-color: $topic-green;
      }

      &.primary {
        background-color: $primary-color;
      }

      &.secondary {
        background-color: $secondary-color;
      }

      &.vivid-blue {
        background-color: $blue;
      }
    }
  }

  &__title {
    margin: 0 0 16px;
    color: currentColor;
  }

  &__content {
    margin-top: 16px;
    color: currentColor;

    @include md {
      margin-top: 0;
    }
  }
}