.mp4-bg {
  pointer-events: auto;
  color: #efeeec;
  isolation: isolate;
  background-color: #131313;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(0);
}

.mp4-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.mp4-bg-video {
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.mp4-bg__video-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: absolute;
}

.mp4-bg__before {
  padding-top: 62.5%;
}

.mp4-bg__video {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}

.mp4-bg__placeholder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
  display: block;
  position: absolute;
}

.mp4-bg[data-mp4-activated="true"][data-mp4-loaded="true"]
  .mp4-bg__placeholder {
  opacity: 0;
  transition-delay: 0.2s;
}

/* Optional: Play/Pause */
.mp4-bg__btn {
  z-index: 10;
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  background-color: #64646433;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  transition: opacity 0.3s linear;
  display: flex;
  position: relative;
}

.mp4-bg__play {
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 4vw;
  right: 4vw;
}

.mp4-bg__btn-play-svg {
  width: 40%;
}

.mp4-bg__pause {
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 4vw;
  right: 4vw;
  display: none;
}

.mp4-bg[data-mp4-playing="true"] .mp4-bg__pause {
  display: flex;
}

.mp4-bg__btn-pause-svg {
  width: 50%;
}

.mp4-bg[data-mp4-playing="true"] .mp4-bg__pause,
.mp4-bg[data-mp4-playing="false"] .mp4-bg__play {
  opacity: 1;
}

.mp4-bg[data-mp4-playing="true"] .mp4-bg__play,
.mp4-bg[data-mp4-playing="false"] .mp4-bg__pause {
  opacity: 0;
}

@media screen and (max-width: 991px) {
  .mp4-bg__play,
  .mp4-bg__pause {
    bottom: 1em;
    right: 1em;
  }
}