.video {

  display: flex;
  flex-direction: column;
  padding: var(--space-large) var(--space-medium) 0 var(--space-medium);

  &__content {

    border-radius: 0.2em;
    display: flex;
    margin-inline: auto;
    overflow: hidden;
    position: relative;
    width: min(100%, 35em);

    video {
      display: block;
    }

    button {

      cursor: pointer;
      inset: 0;
      position: absolute;
      z-index: 1;

      &:before {
        background: linear-gradient(
          180deg,
          rgba(var(--rgb-black), 0.2) 0,
          rgba(var(--rgb-black), 0.7) 100%
        );
        border-radius: 0.3em;
        content: '';
        inset: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity var(--transition-slow);
      }

      &:after {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        background: url('../images/play.svg') center center / 0.65em auto no-repeat rgba(var(--rgb-white), 0.8);
        border-radius: 100%;
        box-shadow:
          0 20px 30px -20px rgba(var(--rgb-black), 0.3),
          0 10px 20px -10px rgba(var(--rgb-black), 0.5)
        ;
        content: '';
        display: inline-flex;
        height: 2.2em;
        pointer-events: none;
        position: relative;
        transition:
          background-color var(--transition-slow),
          transform var(--transition-slow)
        ;
        width: 2.2em;
        will-change: transform;
      }

    }

  }

  &--playing {

    .video__content button {
      display: none;
    }

  }

  @media(hover: hover) {

    &__content button {

      &:focus,
      &:hover {

        &:before {
          opacity: 0.9;
        }

        &:after {
          background-color: rgba(var(--rgb-white), 0.95);
          transform: scale(1.04);
        }

      }

    }

  }

  @media(min-width: 64em) {
    padding-left: var(--space-large);
    padding-right: var(--space-large);
  }

}
