div.video-wrapper {
  max-width: 100%;
}

.video {
  text-align: center;
  margin: 32px auto;
  position: relative;
}

.video.lazy-loading {
  /* reserve an approximate space to avoid extensive layout shifts */
  aspect-ratio: 16/9;
}

.video > div {
  display: flex;
  justify-content: center;
}

.video video {
  max-width: var(--desktop-max-width);
  width: 100%;
}

.video video[data-loading] {
  /* reserve an approximate space to avoid extensive layout shifts */
  width: 100%;
  aspect-ratio: 16/9;
}

.video .video-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}

.video .video-placeholder > * {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}

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

.video .video-placeholder-play button {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(3);
  width: 22px;
  height: 22px;
  border: 2px solid;
  border-radius: 20px;
  padding: 0;
}

.video .video-placeholder-play button::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 0;
  height: 10px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid;
  top: 4px;
  left: 7px;
}

video + div.mute-button {
  background-image: url(/icons/volume-up.svg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: invert(38%) sepia(9%) saturate(23%) hue-rotate(313deg) brightness(100%) contrast(89%);
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  opacity: 0.7;
}

video.muted + div.mute-button {
  background-image: url(/icons/volume-mute.svg);
}