.video {
  display: flex;
  flex-direction: column;
  margin-bottom: 3em;
  margin-inline: auto;
  margin-top: 3em;
  position: relative;
  width: min(100%, 80em);
}

.video video {
  border-radius: 0.4em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.3),
    0 0.3em 2.0em -1.2em rgba(var(--rgb-black), 0.1),
    0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.2),
    0 0.9em 2.8em -2.0em rgba(var(--rgb-black), 0.3),
    0 1.2em 3.2em -2.4em rgba(var(--rgb-black), 0.4),
    0 1.5em 3.6em -2.8em rgba(var(--rgb-black), 0.5)
  ;
  display: block;
  overflow: hidden;
}

.video button {
  border-radius: 0.4em;
  cursor: pointer;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.video button:after {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: url(../images/play.svg) center center / 1.8em 1.8em no-repeat rgba(var(--rgb-turquoise), 0.8);
  border-radius: 100%;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.05),
    0 0.4em 1.2em -0.6em rgba(var(--rgb-black), 0.1),
    0 0.8em 1.6em -0.8em rgba(var(--rgb-black), 0.2)
  ;
  content: '';
  display: inline-flex;
  height: 5em;
  position: relative;
  transition:
    background-color var(--transition),
    transform var(--transition)
  ;
  width: 5em;
  will-change: transform;
}

.video--playing button {
  display: none;
}

@media(hover: hover) {

  .video button:hover:after {
    background-color: rgba(var(--rgb-turquoise), 0.9);
    transform: scale(1.03);
  }

}

@media(min-width: 64em) {

  .video {
    margin-bottom: 5em;
    margin-top: 5em;
  }

}