@import './../../styles/variables/index.scss';

.video {
  max-width: 1366px;
  margin: 0 auto 24px auto;
  padding: 0;

  @media (min-width: 560px) {
    padding: 0 32px;
  }

  @media (min-width: 900px) {
    padding: 0 43px;
  }

  &:not(:first-of-type) {
    margin: 0 auto 80px auto;
  }

  .play {
    display: flex;
    align-items: flex-end;

    h2 {
      color: $white;
      margin-right: 9px;
    }

    img {
      width: 32px;
      height: 32px;
      @media (min-width: 900px) {
        width: 56px;
        height: 56px;
      }
    }
  }

  video {
    object-fit: cover;
    height: 100%;
    display: block;
  }

  .container {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
  }

  .reactPlayer {
    position: absolute;
    top: 0;
    left: 0;
  }
}