/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./components/block/HeroSlide/style.css ***!
  \******************************************************************************************************************************************************************************************/
/**
 * Custom Media Queries
 * Works like Custom Properties, except for media queries.
 *
 * @link: https://drafts.csswg.org/mediaqueries-5/#custom-mq
 * @link: https://github.com/postcss/postcss-custom-media
 **/

/* Min-Width */

/* Customize based on project */

/* Max-Width */

/* Customize based on project */

/* Min-Max-Width */

:root {
  --clr-primary: #00634e;
  --clr-primary-rgb: 0, 99, 78;
  --clr-grey: #f4f4f4;
  --clr-secondary: var(--clr-grey);
  --clr-tertiary: #9dcff0;
  --clr-fourth: #7eb975;
  --clr-fifth: #fae46b;
  --clr-sixth: #e08982;
  --clr-accent: var(--clr-grey);
  --clr-grey-200: #ddd;
  --clr-grey-500: #a5b2af;
  --clr-grey-900: #373d42;
  --clr-grey-dark: #666766;
  --clr-grey-dark-muted: #898989;
  --clr-error: #e56b6b;
  --clr-success: var(--clr-fourth);
  --clr-warning: var(--clr-fifth);
  --clr-info: var(--clr-tertiary);
  --clr-white: #fff;
  --clr-black: #121211;
  --clr-pure-black: #000;
  --clr-muted: #dddfe4;
  --clr-muted-transparent: var(--clr-grey);
  --clr-border: transparent;
  --clr-list-marker: var(--clr-primary);
  --clr-marker: var(--clr-primary);
  --clr-headline: var(--clr-text);
  --clr-text: var(--clr-black);
  --clr-text-secondary: var(--clr-white);
  --clr-text-muted: var(--clr-grey-dark-muted);
  --clr-link: var(--clr-text);
  --clr-divider: var(--clr-secondary);
  --clr-label: var(--clr-text);
  --bg-clr-page: #f8fafb;
  --bg-clr-one: var(--clr-white);
  --bg-clr-two: var(--clr-secondary);
  --bg-clr-three: var(--clr-tertiary);
  --bg-clr-four: var(--clr-fourth);
  --bg-clr-five: var(--clr-fifth);
  --bg-clr-six: var(--clr-sixth);
  --bg-clr-seven: var(--clr-primary);
  --bg-clr-eight: #a73d3e;
  --bg-clr-input: var(--clr-white);
  --clr-input: var(--clr-grey-dark-muted);
  --border-clr-input: var(--clr-text);
  --underline-color: var(--clr-primary);
}

/** Checkbox and Radio Mixins */

.swiper-slide[name='HeroSlide'] {
  align-items: center;
  background: linear-gradient(
    to right,
    var(--clr-white) var(--gradient),
    var(--clr-primary) var(--gradient)
  );
  display: flex;
  min-height: calc(50dvh - var(--wp-admin--admin-bar--height, 0px));
  padding-block-start: calc(var(--header-height));
}

@media screen and (width >= 1024px) {

.swiper-slide[name='HeroSlide'] {
    min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
    padding-block-start: calc(
      var(--header-height) - var(--wp-admin--admin-bar--height, 0px)
    )
}
  }

@media screen and (width >= 1920px) {

.swiper-slide[name='HeroSlide'] {
    min-height: calc(50dvh - var(--wp-admin--admin-bar--height, 0px))
}
  }

.swiper-slide[name='HeroSlide'].pattern-one figure {
      max-width: 320px;
    }

@media screen and (width >= 1024px) {
      .swiper-slide[name='HeroSlide'].pattern-one::before {
        background: var(--clr-white);
        clip-path: polygon(0% 0%, 45% 0, 75% 50%, 45% 100%, 0% 100%);
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }
        .swiper-slide[name='HeroSlide'].pattern-one [name='ElementImage'] figure {
          max-width: 440px;
          transform: translate(0, -60px);
        }
    }

@media screen and (width >= 1280px) {
      .swiper-slide[name='HeroSlide'].pattern-one::before {
        background: linear-gradient(
          to right,
          var(--clr-white) 50%,
          var(--clr-primary)
        );
        clip-path: polygon(0% 0%, 45% 0, 64% 50%, 45% 100%, 0% 100%);
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }
        .swiper-slide[name='HeroSlide'].pattern-one [name='ElementImage'] figure {
          max-width: 440px;
          transform: translate(-20px, -60px);
        }
    }

@media screen and (width < 768px) {
      .swiper-slide[name='HeroSlide'].pattern-two [name='ElementImage'] {
        margin-block-start: 200px;
      }
    }

@media screen and (width >= 1024px) {
      .swiper-slide[name='HeroSlide'].pattern-two .content {
        grid-column: 1 / 6;
        order: unset;
      }

      .swiper-slide[name='HeroSlide'].pattern-two [name='ElementImage'] {
        grid-column: 6 / -1;
      }

        .swiper-slide[name='HeroSlide'].pattern-two [name='ElementImage'] figure {
          max-width: calc(100% + 40px);
          transform: translate(-40px, 0);
          width: calc(100% + 40px);
        }
    }

@media screen and (width >= 1280px) {
      .swiper-slide[name='HeroSlide'].pattern-two .content {
        grid-column: 1 / 5;
      }

      .swiper-slide[name='HeroSlide'].pattern-two [name='ElementImage'] {
        grid-column: 5 / -1;
      }

        .swiper-slide[name='HeroSlide'].pattern-two [name='ElementImage'] figure {
          max-width: 100%;
        }
    }

.swiper-slide[name='HeroSlide'] .grid {
    --columns: 1;

    align-items: center;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
  }

@media screen and (width >= 1024px) {

.swiper-slide[name='HeroSlide'] .grid {
      --columns: 12
  }
    }

.swiper-slide[name='HeroSlide'] .content {
    align-content: center;
    grid-column: 1 / -1;
    order: 2;
    position: relative;
  }

@media screen and (width >= 1024px) {

.swiper-slide[name='HeroSlide'] .content {
      grid-column: 1 / 7;
      order: unset
  }
    }

@media screen and (width >= 1280px) {

.swiper-slide[name='HeroSlide'] .content {
      grid-column: 1 / 6
  }
    }

.swiper-slide[name='HeroSlide'] [name='ElementImage'] {
    grid-column: 1 / -1;
    height: -moz-fit-content;
    height: fit-content;
  }

@media screen and (width >= 1024px) {

.swiper-slide[name='HeroSlide'] [name='ElementImage'] {
      grid-column: 7 / -1
  }

      .swiper-slide[name='HeroSlide'] [name='ElementImage'] figure {
        margin: 0;
      }
    }

@media screen and (1024px <= width <= 1279px) {

.swiper-slide[name='HeroSlide'] [name='ElementImage'] {
      grid-row: 1
  }
    }

.swiper-slide[name='HeroSlide'] [name='ElementImage'] figure {
      margin: 0 auto;
    }


/*# sourceMappingURL=style.min.css.map*/