/*******
	Breakpoints / Layout / Grid
********/
/*******
	Typography
********/
/* Font weight START */
/* Font weight END */
/*******
	Backgrounds
********/
/*********
	Elements
********/
/* Breakpoints START */
/* Breakpoints END */
/* Spacings START */
/* Spacings END */
/*@import "../base/typography";
*/
.video-block {
  position: relative;
  padding-top: 64px;
  padding-bottom: 64px;
  background-color: white;
  box-shadow: 0 5px white;
}
@media (min-width: 1024px) {
  .video-block {
    padding-top: 96px;
    padding-bottom: 192px;
  }
}
.video-block--reduce-padding {
  padding-top: 20px;
  padding-bottom: 20px;
}
.video-block__container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-block__panel {
  position: relative;
  height: 220px;
  min-width: 340px;
}
@media (min-width: 1024px) {
  .video-block__panel {
    height: 462px;
    width: 720px;
  }
}
.video-block__panel-cover {
  opacity: 1;
  transition: opacity 500ms ease;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
}
.video-block__panel-cover img {
  height: 100%;
}
.video-block__panel-cover.--hide {
  opacity: 0;
  pointer-events: none;
}
.video-block__panel-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.video-block__trigger {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 1;
  z-index: 2;
  transition: opacity 500ms ease;
  cursor: pointer;
}
.video-block__trigger.--hide {
  opacity: 0;
  pointer-events: none;
}
.video-block__play {
  position: relative;
  width: 40px;
  height: 40px;
  z-index: 1;
  z-index: 1;
  display: flex;
}
@media (min-width: 1024px) {
  .video-block__play {
    width: 60px;
    height: 60px;
  }
}
.video-block__play::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0px;
  border-radius: 50%;
  background-color: var(--teal);
  transform-origin: center;
  animation: pulse 4s ease infinite;
}
.video-block__play img {
  border-radius: 50%;
  z-index: 1;
}