/*!************************************************************************************************************************************************************************************************!*\
  !*** 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/ProductContent/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='ProductContent'] .slider-wrapper {
    background-image: linear-gradient(
      180deg,
      var(--bg-clr-one) 33%,
      var(--clr-primary) 33%
    );
    padding-bottom: var(--comp-spacing);
  }

:is([name='ProductContent'] .slider-wrapper) .swiper {
      overflow: visible;
    }

:is(:is([name='ProductContent'] .slider-wrapper) .swiper) .swiper-slide {
        height: auto !important;
      }

:is([name='ProductContent'] .slider-wrapper) .box-padding {
      padding-block-start: 16px;
    }

[name='ProductContent'] .intro {
    position: relative;
  }

:is([name='ProductContent'] .intro) h2 {
      margin-block-end: 24px;
    }

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

:is([name='ProductContent'] .intro) h2 {
        margin-block-end: 48px;
    }
      }

:is([name='ProductContent'] .intro) [name='SliderNavigation'] {
      display: flex;
      justify-content: flex-end;
    }

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

:is([name='ProductContent'] .intro) [name='SliderNavigation'] {
        inset: 0 0 auto auto;
        position: absolute;
    }
      }

:is([name='ProductContent'] .content) h3 {
      color: #363c42;
      font-size: 36px;
      font-style: normal;
      font-weight: var(--fw-bold);
      margin-block-end: 16px;
      text-transform: uppercase;
    }

:is([name='ProductContent'] .content) hr {
      background-color: var(--clr-secondary);
      block-size: 2px;
      inline-size: 80px;
      margin: 0 auto 16px 0;
    }

:is([name='ProductContent'] .video-wrapper) .container {
      --flow-space: 0;

      align-items: center;
      display: grid;
      gap: 48px;
      grid-template-columns: repeat(4, 1fr);
      padding-inline: 0;
    }

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

:is([name='ProductContent'] .video-wrapper) .container {
        --flow-space: 32px;

        gap: var(--gutter);
        grid-template-columns: repeat(12, 1fr);
    }
      }

:is(:is(:is([name='ProductContent'] .video-wrapper) .container) .content)  > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
  }

:is(:is(:is([name='ProductContent'] .video-wrapper) .container) .content)  > :last-child:not([class*='button']) {
    margin-block-end: 0;
    padding-block-end: 0;
  }

:is(:is(:is([name='ProductContent'] .video-wrapper) .container) .content)  > h2,:is(:is(:is([name='ProductContent'] .video-wrapper) .container) .content)  > h3,:is(:is(:is([name='ProductContent'] .video-wrapper) .container) .content)  > h4,:is(:is(:is([name='ProductContent'] .video-wrapper) .container) .content)  > h5,:is(:is(:is([name='ProductContent'] .video-wrapper) .container) .content)  > h6 {
    margin-block-start: 0;
  }

:is(:is([name='ProductContent'] .video-wrapper) .container) .content {

        grid-column: span 4;
        padding-inline: 32px;
      }

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

:is(:is([name='ProductContent'] .video-wrapper) .container) .content {
          grid-column: span 4;
      }
        }

:is(:is(:is([name='ProductContent'] .video-wrapper) .container) .content) h2 {
          margin-block-end: 4px;
        }

:is(:is([name='ProductContent'] .video-wrapper) .container) [name='ElementVideo'] {
        grid-column: span 4;
        margin-block-end: 16px;
      }

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

:is(:is([name='ProductContent'] .video-wrapper) .container) [name='ElementVideo'] {
          grid-column: 6 / span 7;
      }
        }

@media screen and (width < 768px) {

:is([name='ProductContent'] .description-wrapper) .container {
        max-inline-size: 90%;
    }
      }

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

:is([name='ProductContent'] .description-wrapper) .box-padding {
        padding-block: 64px;
        padding-inline: 100px;
    }
      }

:is([name='ProductContent'] .description-wrapper) .headline-wrapper {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }

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

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

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

:is([name='ProductContent'] .description-wrapper) .product-meta {

      align-items: start;
      border-block-start: 1px solid var(--clr-grey-200);
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      padding-block: 16px;
      row-gap: 8px;
    }

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

:is([name='ProductContent'] .description-wrapper) .product-meta {
        row-gap: 0;
    }
      }

:is([name='ProductContent'] .description-wrapper) .headline {
      font-size: 16px;
      font-weight: var(--fw-medium);
      grid-column: span 10;
      line-height: 1;
      margin-block-end: 0;
    }

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

:is([name='ProductContent'] .description-wrapper) .headline {
        grid-column: span 3;
    }
      }

:is([name='ProductContent'] .description-wrapper) .content {
      grid-column: span 10;
      line-height: 1.4;
    }

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

:is([name='ProductContent'] .description-wrapper) .content {
        grid-column: 5 / -1;
    }
      }

.full-width:is(:is([name='ProductContent'] .description-wrapper) .content) {
        grid-column: span 10;
        padding-top: 24px;
      }

[name='ProductContent'] {
  overflow: clip;
}

@media screen and (width < 768px) {
      :is([name='ProductContent'] .download-wrapper) .container {
        max-inline-size: 90%;
      }
    }

:is([name='ProductContent'] .download-wrapper) h2 {
      font-size: 40px;
      font-weight: var(--fw-bold);
      text-transform: uppercase;
    }

:is(:is([name='ProductContent'] .download-wrapper) h2) .lead--large {
        font-weight: var(--fw-regular);
      }

:is([name='ProductContent'] .download-wrapper) .downloads {
      flex-wrap: wrap;
    }

@media screen and (width < 768px) {
        :is(:is([name='ProductContent'] .download-wrapper) .downloads) .download {
          width: 100%;
        }
      }

:is([name='ProductContent'] .download-wrapper) .button:first-of-type {
      padding-inline-start: 0;
    }

[name='ProductContent'] {
  overflow: clip;
  padding-block-end: 0;
}

:is([name='ProductContent'] .container,[name='ProductContent'] .content,[name='ProductContent'] [name='ElementImage'])  > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
  }

:is([name='ProductContent'] .container,[name='ProductContent'] .content,[name='ProductContent'] [name='ElementImage'])  > :last-child:not([class*='button']) {
    margin-block-end: 0;
    padding-block-end: 0;
  }

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


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