.video-player-wrapper {
  border-radius: 40px;
  overflow: hidden;
  position: relative;

  @include breakpoint(max-lg) {
    border-radius: 25px;
  }
  @include breakpoint(max-md) {
    border-radius: 15px;
  }

  video {
    display: block;
    width: 100%;
    max-height: 800px;
    object-fit: cover;
    object-position: center;
    &.pointer {
      cursor: pointer;
    }
  }
  .play-btn {
    @include transition($transition-2);
    @extend %p-absolute, %d-grid, %place-center;
    @include transform(translate(-50%, -50%));
    top: 50%;
    left: 50%;
    width: 152px;
    height: 152px;
    border-radius: 100%;
    overflow: hidden;
    background-color: rgba($color-white, 0.1);
    border: 2px solid $color-primary;
    backdrop-filter: blur(7px);
    font-size: 50px;
    color: $color-primary;
    // display: grid;
    // place-content: center;

    &.disabled {
      transform: translate(-50%, -50%) scale(0.4);
      visibility: hidden;
      cursor: initial;
      opacity: 0;
    }

    @include breakpoint(max-lg) {
      width: 120px;
      height: 120px;
      font-size: 45px;
    }
    @include breakpoint(max-md) {
      width: 100px;
      height: 100px;
      font-size: 40px;
    }
  }
}

.video2 {
  &.section {
  }

  &__player-wrapper {
    border-radius: 0px;
    max-height: 820px;
    height: 100%;
    video {
      height: 100%;
      width: 100%;
      border-radius: 0;
      -o-object-fit: cover;
      object-fit: cover;
      -o-object-position: center;
      object-position: center;
      -webkit-filter: brightness(0.6);
      filter: brightness(0.6);
    }
  }
  &__content-outer {
    position: absolute;
    inset: 0;
    .section-title {
    }
    .video2-play-btn {
      position: relative;

      i {
        @extend %p-absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
      }
      &.play {
        i {
          &:nth-of-type(1) {
            display: none;
          }
        }
      }
      &:not(.play) {
        i {
          &:nth-of-type(2) {
            display: none;
          }
        }
      }

      @include breakpoint(max-sm) {
        width: 70px;
        height: 70px;

        i {
          font-size: 30px;
        }
      }
    }

    @include breakpoint(max-lg) {
      padding-top: 80px;
      padding-bottom: 80px;
    }
    @include breakpoint(max-md) {
      padding-top: 30px;
      padding-bottom: 30px;
    }
  }
}

.play-btn,
.video2-play-btn {
  @include transition($transition-2);
  width: 152px;
  height: 152px;
  border-radius: 100%;
  overflow: hidden;
  background-color: rgba($color-white, 0.1);
  border: 2px solid $color-primary;
  backdrop-filter: blur(7px);
  font-size: 50px;
  color: $color-primary;
  // display: grid;
  // place-content: center;

  &.disabled {
    transform: translate(-50%, -50%) scale(0.4);
    visibility: hidden;
    cursor: initial;
    opacity: 0;
  }

  @include breakpoint(max-lg) {
    width: 120px;
    height: 120px;
    font-size: 45px;
  }
  @include breakpoint(max-md) {
    width: 100px;
    height: 100px;
    font-size: 40px;
  }
}
