/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/blocks/industry-grid/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************/
/**
 * Breakpoints.
 *
 * Sass cannot read the `--breakpoint-*` custom properties out of the Tailwind
 * theme at compile time, so this map mirrors them by hand. Keep the two in step:
 * `src/global/tailwind/design-system.css` is the source of truth, and the names
 * and values here are deliberately identical to it so there is one vocabulary
 * across utilities and SCSS.
 *
 * Values are the breakpoint's *min-width*, matching Tailwind. The mixin
 * subtracts a pixel when it needs a max-width query.
 */
/**
 * Breakpoint query.
 *
 * The map stores each breakpoint's min-width, the same way Tailwind's
 * `--breakpoint-*` variables do, so `$mobileFirst: true` uses the value as-is
 * and the max-width case stops a pixel short of it. That means
 * `breakpoint("sm")` and `breakpoint("sm", true)` never both match a width.
 */
/*********************
* BREAKPOINTS
*
* Names match the Tailwind scale in design-system.css:
* xxs 320, xs 375, sml 479, smlr 568, sm 768, md 992,
* lg 1025, wd 1200, lp 1400, bigLp 1600, xl 1930.
*
* @example
* below the breakpoint (max-width)
* @include breakpoint('sm') {
*	@content;
* }
*
* from the breakpoint up (min-width), matching the `sm:` utility prefix
* @include breakpoint('sm', true) {
*	@content;
*}
*********************/
/**
* Mixin to declare Font-face
*
*/
/**
 * Industry Carousel. Swiper needs the slide width in CSS (slidesPerView: auto),
 * and the card scrim is a gradient rather than a utility.
 */
.block-industry-grid .swiper {
  width: 100%;
  overflow: visible;
}
.block-industry-grid .swiper-slide {
  width: 320px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .block-industry-grid .swiper-slide {
    width: 325px;
  }
}
@media screen and (max-width: 374px) {
  .block-industry-grid .swiper-slide {
    width: 260px;
  }
}
.block-industry-grid__card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 80%);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}
.block-industry-grid {
  /**
   * Touch devices have no hover, so the description is always visible there;
   * on desktop it is revealed on the focused/hovered card, as designed.
   */
}
.block-industry-grid__excerpt {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}
.block-industry-grid__excerpt > span {
  display: block;
  /* Inside the collapsing row, so it disappears with the excerpt. */
  padding-top: 12px;
  overflow: hidden;
}
.block-industry-grid__excerpt {
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.32s ease, opacity 0.32s ease, padding 0.32s;
}
.block-industry-grid__card:hover .block-industry-grid__excerpt, .block-industry-grid__card:focus-visible .block-industry-grid__excerpt {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 14px;
}
.block-industry-grid .swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.block-industry-grid {
  /* Micro-interactions: the card image eases in, the arrows fill on hover. */
}
.block-industry-grid__card img {
  transition: transform 0.5s ease;
}
.block-industry-grid__card:hover img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .block-industry-grid__card img,
  .block-industry-grid__excerpt {
    transition: none;
  }
  .block-industry-grid__card:hover img {
    transform: none;
  }
}

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