.main-screen {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;

  &__background {
    width: 100%;
    height: 100%;
  }

  &__video {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;

    &--desc {
      @include breakpoint-down('tabM') {
        display: none;
      }
    }

    &--mobile {
      display: none;

      @include breakpoint-down('tabM') {
        display: block;
      }
    }
  }

  &__content {
    width: 100%;
    max-width: 581px;
    position: absolute;
    right: 310px;
    top: 29.2%;
    z-index: 1;

    @include breakpoint-down('deskL') {
      max-width: 460px;
      right: 250px;
      top: 21.2%;
    }

    @include breakpoint-down('deskM') {
      right: 213px;
      top: 205px;
    }

    @include breakpoint-down('deskS') {
      right: auto;
      left: 50%;
      transform: translateX(-50%);
      max-width: 511px;
    }

    @include breakpoint-down('tabM') {
      top: 227px;
      padding: 0 20px;
    }

    @include breakpoint-down('mobM') {
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    @include breakpoint-down('tabM') {
      width: 200%;
    }
  }

  &__title {
    margin-bottom: 16px;
    color: $white;
    opacity: 0;
    transform: translateY(-30px);

    @include breakpoint-down('deskS') {
      text-align: center;
    }
  }

  &__text {
    color: $white;
    opacity: 0;
    transform: translateY(-30px);

    @include breakpoint-down('deskS') {
      text-align: center;
    }
  }

  &__button {
    margin-top: 24px;
    opacity: 0;
    transform: translateY(-30px);

    @include breakpoint-down('deskS') {
      margin: 24px auto 0;
    }
  }

  &__span {
    display: inline-block;
    font-weight: 250;

    &-red {
      color: $redGrey1;
      font-weight: 700;
    }

    &-white {
      font-weight: 700;
    }

    &.js-about-animation-right {
      &-1, &-2 {
        transform: translateX(1000px);
      }
    }

    &.js-about-animation-left {
      &-1, &-2, &-3, &-4 {
        transform: translateX(-2000px);
      }
    }
  }

  &__first-animation {
    overflow: hidden;
    position: fixed;
    pointer-events: none;
    top: 405px;
    left: 0;
    right: -500px;

    @include breakpoint-down('deskL') {
      top: 315px;
    }

    @include breakpoint-down('deskM') {
      top: 248px;
    }

    @include breakpoint-down('deskS') {
      top: 160px;
    }

    @include breakpoint-down('tabM') {
      top: 210px;
    }

    &-span {
      display: block;
      background: white;
      height: 3px;
      width: 600px;
      border-radius: 100%;
      margin: 0 auto;
      margin-bottom: 50px;

      &-left {
        &-1, &-2, &-3 {
          position: relative;
          left: -1200px;
        }
      }

      &-right {
        &-1, &-2 {
          position: relative;
          right: -1200px;
        }
      }
    }
  }

  &--about {
    background: $primary1;

    .container {
      @include breakpoint-down('deskL') {
        width: 1180px;
      }

      @include breakpoint-down('deskM') {
        width: 940px;
      }

      @include breakpoint-down('deskS') {
        width: 688px;
      }

      @include breakpoint-down('tabM') {
        width: 100%;
      }
    }

    .main-screen {
      &__background {
        width: 100%;
      }

      &__video {

        &-two {
          opacity: 0;

          @include breakpoint-down('deskS') {
            opacity: 1;
          }
        }
      }

      &__img {
        width: 100%;
        display: none;

        @include breakpoint-down('tabM') {
          display: block;
        }
      }

      &__inner {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      &__title {
        font-size: 77px;
        opacity: 1;
        transform: none;
        margin-bottom: 16px;

        @include breakpoint-down('deskL') {
          font-size: 69px;
        }

        @include breakpoint-down('deskS') {
          text-align: left;
          font-size: 60px;
        }

        @include breakpoint-down('tabM') {
          font-size: 32px;
        }
      }

      &__content {
        top: 370px;
        right: 323px;
        max-width: 665px;

        @include breakpoint-down('deskL') {
          top: 299px;
          right: 200px;
        }

        @include breakpoint-down('deskM') {
          top: 232px;
          right: 170px;
        }

        @include breakpoint-down('deskS') {
          max-width: 518px;
          top: 160px;
        }

        @include breakpoint-down('tabM') {
          padding: 0;
          max-width: 277px;
          top: 346px;
        }

        &--two {
          top: auto;
          left: 0;
          bottom: 389px;
          max-width: 580px;

          @include breakpoint-down('deskL') {
            bottom: 289px;
            max-width: 460px;
          }

          @include breakpoint-down('deskM') {
            bottom: 224px;
          }

          @include breakpoint-down('deskS') {
            left: 50%;
            transform: translateX(-50%);
            bottom: 171px;
          }

          @include breakpoint-down('tabM') {
            max-width: 375px;
            bottom: 138px;
            padding: 0 20px;
          }

          .main-screen {
            &__title {
              opacity: 0;
              transform: translateY(-40px);
              font-size: 55px;

              @include breakpoint-down('deskL') {
                font-size: 49px;
              }

              @include breakpoint-down('deskS') {
                text-align: center;
                font-size: 31px;
              }
            }

            &__text {
              opacity: 0;
              transform: translateY(-40px);
            }
          }
        }
      }

      &__text {
        opacity: 1;
        transform: none;
      }
    }
  }

  &--sustainability {

    .main-screen__video--sustainability {
      //display: block;
      width: 100%;
      height: 100vh;
      object-fit: cover;

      @include breakpoint-down('tabM') {
        display: none;
      }
    }

    .main-screen__img {
      width: 100%;
      display: none;

      @include breakpoint-down('tabM') {
        display: block;
      }
    }

    .main-screen__content {
      top: 50%;
      left: 50%;
      max-width: 1084px;
      transform: translate(-50%, -50%);
    }

    .main-screen__title {
      opacity: 1;
      font-weight: 700;
      font-size: 56px;
      transform: translate(0);
      margin-bottom: 48px;
      text-align: center;
      overflow: hidden;

      color: $blue;
      display: flex;
      justify-content: center;

      @include breakpoint-down('deskS') {
        font-size: 32px;
        line-height: 25.6px;
        margin-bottom: 24px;
      }

      span {
        letter-spacing: 1em;
        opacity: 0;

        @include breakpoint-down('tabM') {
          letter-spacing: 0.32em;
        }

        &:last-of-type {
          letter-spacing: 0;
        }
      }
    }

    .main-screen__desc {
      text-align: center;
      max-width: 780px;
      margin: 0 auto;
      opacity: 0;
      transform: translateY(-20px);
      will-change: transform;

      @include breakpoint-down('deskM') {
        max-width: 620px;
      }

      @include breakpoint-down('deskS') {
        max-width: 512px;
      }
    }

    .btn-arrow__item {
      border-radius: 4px 4px 0 0;
      position: absolute;
      z-index: 3;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}