.banner-video {
  aspect-ratio: 72/21;
  overflow: hidden;

  .field,
  .media,
  .field__item {
    height: 100%;
  }

  img,
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .toggle-play {
    .state-play,
    .state-pause {
      display: none;
    }

    &[data-state="play"] {
      .state-play {
        display: block;
      }
    }

    &[data-state="pause"] {
      .state-pause {
        display: block;
      }
    }
  }
}

@media only screen and (min-width: 768px) {
  .banner-video {
    aspect-ratio: 72/25;

    .media--type-video {
      display: block;
    }
  }
}