/*!************************************************!*\
  !*** ../src/elements/hero-base/hero-base.scss ***!
  \************************************************/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.hero-base-section {
  --hero-margin: 0px;
  --hero-height: /* grow(420, 800, $to: 3xl) */ clamp(26.25rem, 20.6980519481rem + 24.6753246753vw, 50rem);
  --hero-element-aspect-ratio: calc(var(--100vw) / var(--hero-height));
  container-name: theme;
  --theme: image;
  --theme-id: 1627772620;
  --tags-list-background: var(--grey-50);
  --tags-list-foreground: var(--black);
  --link-underline: color-mix(in srgb, var(--page-color-950), transparent 80%);
}
@media (prefers-contrast: more) {
  .hero-base-section {
    --link-underline: var(--page-color);
  }
}
.hero-base-section {
  position: relative;
  display: grid;
  padding: var(--hero-margin, 0px);
  min-height: var(--hero-height, 0);
  color: var(--white);
}
.hero-base-section.hero-size-full {
  --hero-height: calc(var(--100svh) - var(--admin-bar-height));
}
.hero-base-section .hero-media {
  display: grid;
  align-items: var(--content-alignment);
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "content";
}
.hero-base-section .hero-media > * {
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.hero-base-section .hero-media .hero-preview-wrapper {
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0ms;
}
.hero-base-section .hero-media .hero-preview-wrapper.loading {
  opacity: 1;
}
.hero-base-section .hero-media .hero-preview-wrapper[data-loading-speed=slow] {
  transition-duration: 2000ms;
}
.hero-base-section .hero-media .hero-preview-wrapper[data-loading-speed=medium] {
  transition-duration: 650ms;
}
.hero-base-section .hero-media .hero-preview-wrapper[data-loading-speed=fast] {
  transition-duration: 250ms;
}
.hero-base-section .hero-media .hero-preview-wrapper:is(body.no-js *) {
  display: none;
}
.hero-base-section .hero-media .hero-preview-wrapper .hero-preview {
  --blur: 30px;
  height: calc(100% + 4 * var(--blur));
  background-image: var(--hero-image-preview);
  background-size: cover;
  background-position: var(--hero-image-position);
  filter: blur(var(--blur));
  margin: calc(-2 * var(--blur));
}
.hero-base-section .hero-media-overlay {
  z-index: 1;
  align-self: stretch;
}
.hero-base-section.hero-align-start {
  --content-alignment: flex-start;
}
.hero-base-section.hero-align-start .hero-media-overlay {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 250px);
}
.hero-base-section.hero-align-center {
  --content-alignment: center;
}
.hero-base-section.hero-align-end {
  --content-alignment: flex-end;
}
.hero-base-section.hero-align-end .hero-media-overlay {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 250px);
}
.hero-base-section .hero-content-wrapper {
  z-index: 1;
  grid-area: content;
  margin-left: auto;
  margin-right: auto;
  width: var(--container-width, auto);
  padding: var(--container-padding, 0);
  padding-top: calc(var(--hero-additional-padding-top, 0px) + min(/* grow(32, 120, $to: 3xl) */ clamp(2rem, 0.7142857143rem + 5.7142857143vw, 7.5rem), 7.5vh));
  padding-bottom: calc(var(--hero-additional-padding-bottom, 0px) + min(/* grow(32, 120, $to: 3xl) */ clamp(2rem, 0.7142857143rem + 5.7142857143vw, 7.5rem), 7.5vh));
}
.hero-base-section .hero-content {
  max-width: 1300px;
}
.hero-base-section .hero-content > *:first-child {
  margin-top: 0;
}
.hero-base-section .hero-content > *:last-child {
  margin-bottom: 0;
}
.hero-base-section .hero-content :is(h1),
.hero-base-section .hero-content :is(.h1, [data-h="1"]) {
  font-size: /* grow(42, 104) */ clamp(2.625rem, 1.5681818182rem + 4.696969697vw, 6.5rem);
}

.hero-base-section.hero-is-image {
  --background-image: var(--hero-image-full);
}
@media (width < 1900px /* 3xl */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-3xl, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-3xl-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 1600px /* 2xl */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-2xl, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-2xl-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 1400px /* xl */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-xl, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-xl-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 1200px /* lg */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-lg, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-lg-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 992px /* md */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-md, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-md-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 768px /* sm */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-sm, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-sm-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (width < 540px /* s */) {
  .hero-base-section.hero-is-image:not(.hero-size-full) {
    --background-image: var(--hero-image-until-s, var(--hero-image-full));
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-image:not(.hero-size-full) {
      --background-image: var(
        --hero-image-until-s-2x,
        var(--hero-image-full)
      );
    }
  }
}
@media (max-width: 1899px) and (max-height: 1068px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-3xl, var(--hero-image-full));
  }
}
@media (max-width: 1899px) and (max-height: 1068px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-3xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1599px) and (max-height: 899px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-2xl, var(--hero-image-full));
  }
}
@media (max-width: 1599px) and (max-height: 899px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-2xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1399px) and (max-height: 786px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-xl, var(--hero-image-full));
  }
}
@media (max-width: 1399px) and (max-height: 786px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-xl-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 1199px) and (max-height: 674px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-lg, var(--hero-image-full));
  }
}
@media (max-width: 1199px) and (max-height: 674px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-lg-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 991px) and (max-height: 557px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-md, var(--hero-image-full));
  }
}
@media (max-width: 991px) and (max-height: 557px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-md-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 767px) and (max-height: 431px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-sm, var(--hero-image-full));
  }
}
@media (max-width: 767px) and (max-height: 431px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-sm-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: 539px) and (max-height: 303px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-s, var(--hero-image-full));
  }
}
@media (max-width: 539px) and (max-height: 303px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-s-2x,
      var(--hero-image-full)
    );
  }
}
@media (max-width: -1px) and (max-height: -1px) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(--hero-image-until-xs, var(--hero-image-full));
  }
}
@media (max-width: -1px) and (max-height: -1px) and (min-resolution: 2dppx) {
  .hero-base-section.hero-is-image.hero-size-full {
    --background-image: var(
      --hero-image-until-xs-2x,
      var(--hero-image-full)
    );
  }
}
.hero-base-section.hero-is-image .hero-media {
  background-image: var(--background-image);
  background-size: cover;
  background-position: var(--hero-image-position);
}

.hero-base-section.hero-is-video {
  --background-image: var(--hero-image-full);
}
@media (width < 1900px /* 3xl */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-3xl);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-3xl-2x);
    }
  }
}
@media (width < 1600px /* 2xl */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-2xl);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-2xl-2x);
    }
  }
}
@media (width < 1400px /* xl */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-xl);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-xl-2x);
    }
  }
}
@media (width < 1200px /* lg */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-lg);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-lg-2x);
    }
  }
}
@media (width < 992px /* md */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-md);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-md-2x);
    }
  }
}
@media (width < 768px /* sm */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-sm);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-sm-2x);
    }
  }
}
@media (width < 540px /* s */) {
  .hero-base-section.hero-is-video {
    --background-image: var(--hero-image-until-s);
  }
  @media (min-resolution: 2dppx) {
    .hero-base-section.hero-is-video {
      --background-image: var(--hero-image-until-s-2x);
    }
  }
}
.hero-base-section.hero-is-video .hero-video {
  width: 100%;
  grid-row: 1/-1;
  grid-column: 1/-1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  object-fit: cover;
}

/*# sourceMappingURL=css-wpce--hero-base.css.map*/