.video_showcase-group {
  .video_showcase-row {
    .video_showcase {
      .header {
        display: flex;
        justify-content: center;

        width: 100%;

        .title-paragraph {
          max-width: 1200px;

          text-align: center;
        }
      }

      .top {
        display: flex;
        position: relative;

        @include breakpoint(mobile) {
          flex-direction: column;
        }

        @include breakpoint(laptop) {
          flex-direction: row;
          justify-content: space-between;
        }

        & > .icon-container {
          position: absolute;
          top: 45%;

          display: flex;
          justify-content: center;
          align-items: center;

          height: calculateRem(35);
          width: calculateRem(35);

          z-index: 99;

          border-radius: 50%;

          background-color: rgba($mid-gray, 0.81);

          @include breakpoint(laptop) {
            display: none;
          }

          &.forward {
            right: calculateRem(-14);
          }

          &.back {
            left: calculateRem(-14);

            display: none;
          }

          i {
            font-size: calculateRem(14);
            line-height: calculateRem(35);
          }
        }

        .left {
          @include breakpoint(mobile) {

          }

          @include breakpoint(laptop) {
            flex-grow: 1;

            width: 75%;

            padding-right: calculateRem(15);
          }

          .video {
            position: relative;

            width: 100%;

            padding-top: 56.25%;

            iframe {
              position: absolute;
              top: 0;
              left: 0;

              width: 100%;
              height: 100%;
            }
          }
        }

        .right {

          @include breakpoint(laptop) {
            flex-grow: 1;
            width: 25%;

            display: flex;
            flex-direction: column;

            padding-left: calculateRem(15);
          }

          .list {
            @include breakpoint(laptop) {
              flex-grow: 1;
              flex-basis: 0px;

              overflow-y: auto;
            }

            .next-video {
              position: relative;

              &:not(:last-child) {
                margin-bottom: calculateRem(15);
              }

              &:not(.active) {
                cursor: pointer;

                &:hover {
                  .title {
                    display: block;
                    height: auto;
                  }
                }
              }

              &.active {
                opacity: 0.8;

                .overlay {
                  background-color: rgba($dark-gray, 0.81);
                }
              }

              .thumbnail {
                img {
                  width: 100%;
                }
              }

              .icon-container {
                position: absolute;

                color: $light-gray;

                @include breakpoint(tablet) {
                  top: calc(50% - 25px);
                  left: calc(50% - 25px);
                }
                @include breakpoint(laptop) {
                  top: calc(50% - 30px);
                  left: calc(50% - 30px);
                }

                i {
                  @include breakpoint(tablet) {
                    font-size: 50px;
                  }
                  @include breakpoint(laptop) {
                    font-size: 60px;
                  }
                }
              }

              .title {
                display: none;
                height: 0;

                position: absolute;
                bottom: 0;

                width: 100%;

                padding-top: calculateRem(10);
                padding-left: calculateRem(10);
                padding-bottom: calculateRem(10);
                padding-right: calculateRem(10);

                background-color: rgba($mid-gray, 0.8);

                color: $light;

                text-align: center;

                transition: height ease-in-out 0.5s;
              }
            }
          }
        }
      }
      .bottom {
        margin-top: calculateRem(15);
        padding-right: calculateRem(15);

        .description {
          width: 75%;
        }
      }
    }
  }
}
