/*!**********************************************************************************************************************************************************************************************!*\
  !*** 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/static/ProductIntro/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 */

[name='ProductIntro'] .grid {
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: repeat(4, 1fr);
    padding-block-start: 72px;
  }

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

[name='ProductIntro'] .grid {
      grid-template-columns: repeat(12, 1fr);
      max-width: var(--container-width);
      padding-inline: var(--container-spacing);
      margin-inline: auto;
  }
    }

[name='ProductIntro'] .gallery {
    grid-column: span 4;
  }

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

[name='ProductIntro'] .gallery {
      grid-column: span 5;
  }
    }

:is(:is([name='ProductIntro'] .gallery) .swiper.main) .swiper-slide {
        height: auto;
      }

:is(:is(:is(:is([name='ProductIntro'] .gallery) .swiper.main) .slide-video) [name='ElementVideo']) .video {
            display: flex;
            align-items: center;
            width: 100%;
          }

:is(:is(:is(:is([name='ProductIntro'] .gallery) .swiper.main) .slide-video) [name='ElementVideo']) .video-poster {
            width: 100%;
          }

:is(:is(:is(:is([name='ProductIntro'] .gallery) .swiper.main) .slide-video) [name='ElementVideo']) .video-poster-placeholder {
            aspect-ratio: 4 / 3;
            width: 100%;
          }

:is(:is(:is(:is([name='ProductIntro'] .gallery) .swiper.main) .slide-video) [name='ElementVideo']) .video-player {
            height: auto;
            aspect-ratio: 16 / 9;
            width: 100%;
          }

:is(:is(:is(:is([name='ProductIntro'] .gallery) .swiper.main) .slide-video) [name='ElementVideo']) .video-player--isLoaded {
            display: block;
          }

[name='ProductIntro'] .intro {
    grid-column: span 4;
  }

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

[name='ProductIntro'] .intro {
      grid-column: 7 / span 6;
  }
    }

:is([name='ProductIntro'] .intro) .stack {
      --flow-space: 32px;
    }

[name='ProductIntro'] .slider-navigation {
    display: flex;
    justify-content: flex-end;
  }

:is([name='ProductIntro'] .description)  > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
  }

:is([name='ProductIntro'] .description)  > :last-child:not([class*='button']) {
    margin-block-end: 0;
    padding-block-end: 0;
  }

:is([name='ProductIntro'] .description)  > h2,:is([name='ProductIntro'] .description)  > h3,:is([name='ProductIntro'] .description)  > h4,:is([name='ProductIntro'] .description)  > h5,:is([name='ProductIntro'] .description)  > h6 {
    margin-block-start: 0;
  }

:is([name='ProductIntro'] .description) h1 {
      margin-block-end: 8px;
    }

[name='ProductIntro'] .links {
    align-items: center;
    display: flex;
    gap: 32px;
  }

[name='ProductIntro'] .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
  }

:is([name='ProductIntro'] .meta) .meta-teaser {
      color: var(--clr-grey-dark-muted);
      font-size: 12px;
      margin-block-end: 4px;
    }

:is([name='ProductIntro'] .meta) .flex {
      display: flex;
      flex-direction: column;
      margin-block: 0;
    }

:is([name='ProductIntro'] .meta) .term-title {
      line-height: 1.2;
    }

:is([name='ProductIntro'] .meta) .deployment_type {
      width: 100%;
    }

:is(:is([name='ProductIntro'] .meta) .waste_type)  > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
  }

:is(:is([name='ProductIntro'] .meta) .waste_type)  > :last-child:not([class*='button']) {
    margin-block-end: 0;
    padding-block-end: 0;
  }

:is(:is([name='ProductIntro'] .meta) .waste_type)  > h2,:is(:is([name='ProductIntro'] .meta) .waste_type)  > h3,:is(:is([name='ProductIntro'] .meta) .waste_type)  > h4,:is(:is([name='ProductIntro'] .meta) .waste_type)  > h5,:is(:is([name='ProductIntro'] .meta) .waste_type)  > h6 {
    margin-block-start: 0;
  }

[name='ProductIntro'] .tippy-box[data-theme~='custom'] {
    background-color: var(--clr-grey-dark-muted);
    border-radius: 0;
    color: var(--clr-white);
  }

[data-placement^='top']:is([name='ProductIntro'] .tippy-box[data-theme~='custom']) > .tippy-arrow::before {
      border-top-color: var(--clr-grey-dark-muted);
    }

[data-placement^='bottom']:is([name='ProductIntro'] .tippy-box[data-theme~='custom']) > .tippy-arrow::before {
      border-bottom-color: var(--clr-grey-dark-muted);
    }

[data-placement^='left']:is([name='ProductIntro'] .tippy-box[data-theme~='custom']) > .tippy-arrow::before {
      border-left-color: var(--clr-grey-dark-muted);
    }

[data-placement^='right']:is([name='ProductIntro'] .tippy-box[data-theme~='custom']) > .tippy-arrow::before {
      border-right-color: var(--clr-grey-dark-muted);
    }

[name='ProductIntro'] .thumb {
    margin-block-start: 16px;
  }

/* Video thumbnail with play icon - matches ElementVideo styling */

[name='ProductIntro'] .video-thumb {
    position: relative;
  }

:is([name='ProductIntro'] .video-thumb) .video-thumb-icon {
      align-items: center;
      display: flex;
      height: 32px;
      justify-content: center;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 32px;
      pointer-events: none;
      transition: transform var(--transition-duration, 0.2s) linear;
    }

:is(:is([name='ProductIntro'] .video-thumb) .video-thumb-icon) svg {
        height: 100%;
        width: 100%;
      }

:is(:is(:is([name='ProductIntro'] .video-thumb) .video-thumb-icon) svg) circle {
          stroke: var(--clr-secondary);
          fill: var(--clr-secondary);
        }

:is([name='ProductIntro'] .video-thumb):hover .video-thumb-icon {
      transform: translate(-50%, -50%) scale(1.15);
    }

/* Placeholder for self-hosted videos without poster */

:is([name='ProductIntro'] .video-thumb) .video-thumb-placeholder {
      aspect-ratio: 4 / 3;
      background: var(--clr-grey-200, #e5e5e5);
      width: 100%;
    }

/* Video slides in main swiper */

:is([name='ProductIntro'] .slide-video) [name='ElementVideo'] {
      height: 100%;
    }

:is(:is([name='ProductIntro'] .slide-video) [name='ElementVideo']) .video {
        height: 100%;
      }


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