/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
.hero-carousel-fading-slider {
  --cqh: 400px;
  height: var(--cqh);
}
@media only screen and (min-width: 1024px) {
  .hero-carousel-fading-slider {
    --cqh: 610px;
  }
}

.hero-carousel-image:not(:first-child) {
  opacity: 0;
}

/* CTA arrow: on hover the arrow slides out and hides, and a new arrow slides in.
   The new arrow uses currentColor, which matches the link text colour the arrow stroke is set to. */
.hero-carousel div:has(> .hero-link + svg) {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-carousel div:has(> .hero-link + svg) > svg {
  animation: thef-cta-svg-in 0.3s ease-out 0.25s both;
}
@keyframes thef-cta-svg-in {
  from { transform: translateX(1.25rem); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes thef-cta-svg-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(1.25rem); opacity: 0; }
}
@keyframes thef-cta-after-in {
  from { transform: translate(-1.25rem, -50%); opacity: 0; }
  to { transform: translate(0, -50%); opacity: 1; }
}
@keyframes thef-cta-after-out {
  from { transform: translate(0, -50%); opacity: 1; }
  to { transform: translate(-1.25rem, -50%); opacity: 0; }
}
.hero-carousel .hero-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 22px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12' fill='none' stroke='%23000'%3E%3Cpath d='M15.5584 0.558164L21.0004 6.00012M21.0004 6.00012L15.5584 11.4421M21.0004 6.00012L10.0001 6.0002'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12' fill='none' stroke='%23000'%3E%3Cpath d='M15.5584 0.558164L21.0004 6.00012M21.0004 6.00012L15.5584 11.4421M21.0004 6.00012L10.0001 6.0002'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: 0;
  transform: translate(-1.25rem, -50%);
  pointer-events: none;
  animation: thef-cta-after-out 0.25s ease-in both;
}
.hero-carousel div:has(> .hero-link + svg):hover > svg,
.hero-carousel div:has(> .hero-link + svg):focus-within > svg {
  animation: thef-cta-svg-out 0.25s ease-in both;
}
.hero-carousel div:has(> .hero-link + svg):hover .hero-link::after,
.hero-carousel div:has(> .hero-link + svg):focus-within .hero-link::after {
  animation: thef-cta-after-in 0.3s ease-out 0.25s both;
}

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