/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/gallery-of-three-videos/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
/* @group Gallery-of-three-videos
------------------------------------ */
.gallery-of-three-videos {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--dark-green);
}

.gallery-of-three-videos__col {
  display: flex;
}

.gallery-of-three-videos__text {
  text-align: center;
  margin: 0 0 3.3rem;
}

.gallery-of-three-videos__text h3 {
  text-transform: uppercase;
  font-family: var(--work-font);
  color: var(--light-yellow);
  font-size: 1.8em;
  line-height: 2.1em;
  letter-spacing: 0.06em;
  margin: 0 0 3rem;
  font-weight: 400;
}

.gallery-of-three-videos__text h2 {
  color: var(--light-yellow);
  font-size: 7em;
  line-height: 1.17em;
  margin: 0;
  text-shadow: 0px 0px 12px rgba(37, 55, 80, 0.4);
}

.gallery-of-three-videos .splide__slide {
  display: block;
}

.gallery-of-three-videos .splide__slide::before {
  content: "";
  background: linear-gradient(180deg, rgba(34, 60, 36, 0), rgb(34, 60, 36));
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 33rem;
  z-index: 2;
  pointer-events: none;
}

.gallery-of-three-videos .splide__slide figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 5.2rem 1.5rem 13.1rem;
  z-index: 3;
}

.gallery-of-three-videos .splide__slide:not(.has-link):not(:first-of-type) figcaption {
  padding-bottom: 4rem;
}

.gallery-of-three-videos .splide__slide figcaption h3 {
  --max-character-per-line: 10;
  text-transform: uppercase;
  color: var(--light-yellow);
  font-family: var(--work-font);
  font-weight: 400;
  font-size: 1.8em;
  line-height: 2em;
  letter-spacing: 0.04em;
  margin: 0 0 calc(5rem * var(--subtitle-length, 10) / var(--max-character-per-line));
}

.gallery-of-three-videos .splide__slide figcaption h4 {
  color: var(--light-green);
  font-size: 7em;
  line-height: 1em;
  letter-spacing: 0;
}

.gallery-of-three-videos .splide__slide figcaption button {
  position: absolute;
  bottom: 28rem;
  right: 1.1rem;
  width: 11.8rem;
  height: 11.8rem;
  display: inline-block;
  border-radius: 50%;
  background-color: rgba(226, 107, 63, 0.8);
  color: var(--light-yellow);
  font-size: 1.2rem;
  line-height: 1.6em;
  letter-spacing: 0.08em;
  padding: 0 1rem;
  text-transform: uppercase;
}

.gallery-of-three-videos__action h3 {
  text-transform: uppercase;
  font-family: var(--work-font);
  color: var(--light-yellow);
  font-size: 1rem;
  line-height: 1.5em;
  letter-spacing: 0.024em;
  margin: 0 0 2.4rem;
  font-weight: 400;
}

.gallery-of-three-videos__action li {
  text-transform: uppercase;
  color: var(--light-yellow);
  position: relative;
  font-size: 1.4rem;
  line-height: 1.7em;
  letter-spacing: 0.1em;
  cursor: pointer;
  padding-left: 2rem;
  transition: padding-left 0.7s;
  pointer-events: all;
}

.gallery-of-three-videos__action li span {
  display: inline-block;
  margin-left: 2.1rem;
  font-weight: 700;
}

.gallery-of-three-videos__action li::before {
  content: "";
  display: inline-block;
  height: 0.1rem;
  position: absolute;
  top: 1rem;
  left: 0;
  background-color: var(--light-yellow);
  width: 1.3rem;
  transition: width 0.7s;
}

.gallery-of-three-videos__action li[data-state=active] {
  padding-left: 6.3rem;
}

.gallery-of-three-videos__action li[data-state=active]::before {
  width: 4.8rem;
}

.gallery-of-three-videos__action li:not(:last-child) {
  margin: 0 0 1.76rem;
}

@media only screen and (min-width: 961px) {
  .gallery-of-three-videos__text {
    text-align: left;
    margin: 0;
  }
  .gallery-of-three-videos__col,
  .gallery-of-three-videos .row {
    pointer-events: none;
  }
  .gallery-of-three-videos__col {
    flex-direction: column;
    justify-content: space-between;
  }
  .gallery-of-three-videos .outer-videos {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    width: 100%;
    height: 100%;
  }
  .gallery-of-three-videos .splide {
    height: 100%;
  }
  .gallery-of-three-videos .splide::before {
    content: "";
    width: 100%;
    height: 43.2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
    background: transparent linear-gradient(180deg, rgba(34, 60, 36, 0) 0%, #223C24 100%) 0% 0% no-repeat padding-box;
    mix-blend-mode: multiply;
    opacity: 0.8;
  }
  .gallery-of-three-videos .splide__slide {
    pointer-events: all;
  }
  .gallery-of-three-videos .splide__slide figcaption {
    display: none;
  }
  .gallery-of-three-videos .outer-videos .splide__slide video,
  .gallery-of-three-videos .outer-videos .splide__slide img {
    transition: transform 0.7s;
    transform: scale(1.2);
    overflow: hidden;
  }
  .gallery-of-three-videos .outer-videos .splide__slide.onActive video,
  .gallery-of-three-videos .outer-videos .splide__slide.onActive img {
    transform: scale(1);
  }
  .gallery-of-three-videos .splide__slide::before {
    content: none;
  }
}
@media only screen and (min-width: 1441px) {
  .gallery-of-three-videos .row {
    height: 92rem;
  }
  .gallery-of-three-videos__col {
    padding: 32.1rem 33.6rem 9.5rem;
  }
}
@media only screen and (min-width: 961px) and (max-width: 1440px) {
  .gallery-of-three-videos .row {
    height: 68rem;
  }
  .gallery-of-three-videos__col {
    padding: 14rem 13.5rem 9.5rem;
  }
}
@media only screen and (min-width: 0) and (max-width: 960px) {
  .gallery-of-three-videos__col {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding-bottom: 6rem;
    z-index: 1;
  }
  .gallery-of-three-videos__col .gallery-of-three-videos__text {
    margin: 0;
  }
  .gallery-of-three-videos__col .gallery-of-three-videos__text h3 {
    display: none;
  }
  .gallery-of-three-videos__col,
  .gallery-of-three-videos .splide__slide {
    pointer-events: none;
    height: 68.3rem !important;
  }
  .gallery-of-three-videos .splide__slide button {
    pointer-events: all;
  }
  .gallery-of-three-videos .control-video {
    z-index: 2;
    top: auto;
    bottom: 0;
    right: 0;
    left: auto;
    margin: 2rem;
  }
}
/* @end */

/*# sourceMappingURL=style-index.css.map*/