.video {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video__source {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  justify-content: center;
  margin-bottom: 0.3125em;
  margin-top: 0.3125em;
  position: relative;
}

.video__source video {
  border-radius: 0.3em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0.1em 2.8em -0.8em rgba(var(--rgb-black), 0.1),
    0 0.2em 3.2em -1.2em rgba(var(--rgb-black), 0.2),
    0 0.4em 2.0em -1.2em rgba(var(--rgb-black), 0.3),
    0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.4),
    0 0.8em 2.8em -2.0em rgba(var(--rgb-black), 0.5)
  ;
  overflow: hidden;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.video__source button {
  background: linear-gradient(
    135deg,
    rgba(var(--rgb-blue), 0.6) 0,
    rgba(var(--rgb-blue), 0) 100%
  );
  cursor: pointer;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.video__source button:after {
  background: url('../images/icon-play.svg') center center / 0.9em 0.9em no-repeat var(--color-white);
  border-radius: 100%;
  box-shadow:
    0 0.2em 0.8em -0.2em rgba(var(--rgb-black), 0.1),
    0 0.4em 1.2em -0.4em rgba(var(--rgb-black), 0.2),
    0 0.6em 1.6em -0.6em rgba(var(--rgb-black), 0.3)
  ;
  content: '';
  height: 2.2em;
  left: calc(50% - 1.1em);
  pointer-events: none;
  position: absolute;
  top: calc(50% - 1.1em);
  width: 2.2em;
}

.video__timestamps {
  font-family: var(--font-family-inter-display);
  font-feature-settings: 'liga', 'dlig', 'ss03';
  line-height: 1.5;
  margin-top: 1em;
  width: 100%;
}

.video__timestamps ul {
  display: flex;
  flex-direction: column;
  font-size: 75%;
  gap: 0.2em;
  list-style: none;
  padding-left: 0;
}

.video__timestamps ul li {
  align-items: baseline;
  display: inline-flex;
  gap: 0.6em;
}

.video__timestamps ul li span {
  font-feature-settings: 'case', 'tnum';
  font-size: 72.5%;
  font-weight: 500;
  opacity: 0.8;
}

.video__timestamps ul li button {
  color: var(--color-white);
  cursor: pointer;
  font-weight: 700;
}

.video__timestamps ul li:before {
  display: none;
}

.video.video-zoom-active {
  background: rgba(var(--rgb-blue), 0.96);
  display: grid;
  height: 100%;
  justify-content: center;
  left: 0;
  margin: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 102;
}

.video.video-zoom-active .video__source {
  margin: 0.5em;
  max-width: 45em;
}

.video.video-zoom-active .video__source button {
  display: none;
}

.video.video-zoom-active .video__timestamps {
  display: none;
}

@media(hover: hover) {

  .video__timestamps ul li button:focus,
  .video__timestamps ul li button:hover {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.0825em;
  }

}

@media(min-width: 64em) {

  .video__source {
    margin-left: -2em;
    margin-right: -2em;
  }

  .video--inline .video__source {
    margin-left: -1em;
    margin-right: -1em;
  }

  .video.video-zoom-active .video__source {
    margin: 1.5em;
  }

}