/*
*
*
* VARIABLES
*
*
*/
/*
*
*
* PREVIEW BLOCK
*
*
*/
.wp-block-acf-hero-banner--remove.acf-block-preview section {
  display: none;
}
.wp-block-acf-hero-banner--remove.acf-block-preview div {
  width: 100%;
  height: 500px;
  background-image: url("preview.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/*
*
*
* BLOCK
*
*
*/
.hero {
  position: relative;
  height: 100vh;
  min-height: 800px;
  margin-bottom: 80px;
}
@media screen and (max-width: 576px) {
  .hero {
    min-height: 100vh;
  }
}
.hero .hero__intro {
  z-index: 3;
  padding-bottom: 120px;
}
@media screen and (max-width: 576px) {
  .hero .hero__intro {
    text-align: center;
  }
}
.hero .hero__intro h1 {
  font-size: 6rem;
}
@media screen and (max-width: 991px) {
  .hero .hero__intro h1 {
    font-size: 5rem;
  }
}
@media screen and (max-width: 768px) {
  .hero .hero__intro h1 {
    font-size: 4rem;
  }
}
@media screen and (max-width: 576px) {
  .hero .hero__intro h1 {
    font-size: 3rem;
  }
}
.hero .hero__intro p {
  font-size: 20px;
  font-weight: 300;
  margin: 0 0 32px;
}
@media screen and (max-width: 576px) {
  .hero .hero__intro .button {
    display: inline-block;
    margin: 8px auto;
  }
}
.hero .hero__visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero .hero__visual:before {
  content: "";
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  height: 70%;
  z-index: 2;
  background: #181818;
  background: -webkit-linear-gradient(0deg, rgb(24, 24, 24) 0%, rgb(24, 24, 24) 20%, rgba(24, 24, 24, 0) 100%);
  background: -moz-linear-gradient(0deg, rgb(24, 24, 24) 0%, rgb(24, 24, 24) 20%, rgba(24, 24, 24, 0) 100%);
  background: linear-gradient(0deg, rgb(24, 24, 24) 0%, rgb(24, 24, 24) 20%, rgba(24, 24, 24, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#181818", endColorstr="#181818", GradientType=0);
}
.hero .hero__visual .hero__image {
  overflow: hidden;
}
.hero .hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video {
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video:before {
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

/*
*
*
* RESPONSIVE
*
*
*/
@media screen and (min-width: 991px) {
  .position-absolute-desktop {
    position: absolute;
  }
}