.videoPlayer {
  position: relative;
  width: 100%;
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
  align-items: center;

  &.inline {
    border-radius: var(--Corner-radius-md);
    overflow: hidden;
  }

  &.hero {
    height: 100%;
    .overlay {
      display: contents;
    }
    .playButton {
      position: absolute;
      bottom: var(--Space-x2);
      right: var(--Space-x2);
    }
  }
}

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

.playButton {
  position: absolute;
}

.muteButton {
  position: absolute;
  top: var(--Space-x2);
  right: var(--Space-x2);
}

@media screen and (min-width: 768px) {
  .videoPlayer.hero .playButton {
    bottom: var(--Space-x4);
    right: var(--Space-x4);
  }
}