.video {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60vh;
  background-color: var(--color-primary);
}
@media (min-width: 992px) {
  .video {
    height: 100vh;
  }
}
.video__button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 300ms ease;
  pointer-events: auto;
  z-index: 1;
}
.video__button .btn {
  position: relative;
}
.video__button .btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  background-color: var(--color-primary);
  opacity: 0;
  transition: opacity 500ms ease;
  transform: translate(-50%, -50%) scale(1, 1);
  animation: video-pulse 3s ease infinite;
  z-index: -1;
}
.video.is-playing .video__button {
  opacity: 0;
  pointer-events: none;
}
.video__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.video--editor {
  height: 60vh;
}
.video--editor .video__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--color-primary, #111);
  color: var(--color-secondary, #fff);
}

@keyframes video-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1, 1);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3, 1.6);
    opacity: 0;
  }
}

/*# sourceMappingURL=video.css.map */