.video {
  @include screen(lg,max) {
    position: relative;
    height: 100%;

    @include ratio(1920,1080);
  }

  video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    font-family: 'object-fit: contain;';
  }

  @include screen(xs,max) {
    @include ratio(375,667);
  }

  $b: &;

  &__overlay {
    @include fill-img;

    background: radial-gradient(87.78% 50% at 50% 50%, rgba(53, 51, 115, 0.5) 0%, rgba(53, 51, 115, 0.7) 100%);
    z-index: 5;

    &.closed {
      background: rgba(#000, .5);
    }
  }

  &__controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-wrap {
      display: flex;
      align-items: center;
    }

    .icon-play {
      position: relative;
      width: 1.2rem;
      height: 2rem;
      flex-shrink: 0;

      img {
        @include fill-img;
      }
    }

    .timer {
      font-family: 'Roboto Condensed', 'Open sans' sans-serif;
      font-size: 4rem;
      line-height: 1.2;
      font-weight: 700;
      margin-left: 1.1rem;

      &_beige {
        color: #e0d8be;
      }

      &.closed {
        font-size: 3rem;
        text-transform: uppercase;
        margin-left: 0;
      }
    }

    .latch {
      width: 2rem;
      height: 2rem;
      position: relative;
      margin-top: 2rem;

      img {
        @include fill-img;
      }
    }
  }

  &.play {
    #{$b}__overlay {
      display: none;
    }

    #{$b}__controls {
      display: none;
    }
  }

  &.ended {
    #{$b}__controls {
      display: flex;
      width: 3rem;
      height: 3rem;
      justify-content: center;

      .timer, .latch {
        display: none;
      }
    }
  }
}