/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./frontend/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./web/app/themes/thuisbakkerswinkel/components/hero/src/hero.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************/
.row:has(.twz-hero) {
  --hero-bg: var(--beige-400);
  --row-maxwidth: var(--row-m);
  --row-padding-top: 0;
  --row-padding-bottom: 0;
}
.row:has(.twz-hero):has(.twz-hero--default) {
  --row-maxwidth: var(--row-l);
}
.row:has(.twz-hero) {
  width: 100%;
  background-color: var(--hero-bg);
}

.twz-hero {
  --hero-bg: var(--beige-400);
  --hero-title-color: var(--terracotta-700);
  --hero-text-color: var(--brown-900);
  --hero-padding-block-end: 6rem;
  --hero-padding-block-start: 7rem;
  --hero-min-height: 60rem;
  --hero-content-max-width: min(77.9rem, 90%);
  --hero-intro-max-width: 50rem;
  --hero-media-offset: 2rem;
  --row-maxwidth: var(--row-l);
  --calc-row-width: min(var(--row-width), var(--row-maxwidth));
  background-color: var(--hero-bg);
  position: relative;
  inline-size: 100%;
  padding-block: var(--hero-padding-block-start) var(--hero-padding-block-end);
  color: var(--hero-text-color);
  width: var(--calc-row-width);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .twz-hero {
    margin-top: -2.5rem;
  }
}
@media (max-width: 767px) {
  .twz-hero {
    --hero-min-height: auto;
    --hero-padding-inline: 2rem;
    --hero-padding-block-start: 4rem;
    --hero-padding-block-end: 4rem;
  }
}
.twz-hero__inner {
  z-index: 1;
  min-block-size: 20rem;
  display: grid;
  grid-template-columns: 4fr 2fr;
}
@media (max-width: 767px) {
  .twz-hero__inner {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .twz-hero__inner {
    grid-template-columns: 1fr 1fr;
  }
}
.twz-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.twz-hero__title {
  margin: 0;
  color: var(--hero-title-color);
  max-inline-size: var(--hero-content-max-width);
}
.twz-hero__intro {
  max-inline-size: var(--hero-intro-max-width);
  font-size: var(--fs-16);
  line-height: var(--lineheight-base);
  margin-block-start: 1rem;
}
.twz-hero__intro p {
  margin: 0;
}
.twz-hero__intro-excerpt :where(p), .twz-hero__intro-full :where(p) {
  display: inline;
  margin: 0;
}
.twz-hero__intro-excerpt :where(p)::after, .twz-hero__intro-full :where(p)::after {
  content: " ";
}
.twz-hero__media {
  max-width: 70rem;
  scale: 1.1;
  z-index: 2;
}
@media (max-width: 767px) {
  .twz-hero__media {
    margin-top: 3rem;
  }
}
.home .twz-hero__media {
  margin-right: calc(var(--space-to-screen) * -1 + 4rem);
}
@media (min-width: 768px) {
  .twz-hero:not(.twz-hero--no-overlap):not(.twz-hero--fill-height) .twz-hero__media {
    margin-bottom: calc(var(--hero-padding-block-end) * -1 - var(--hero-media-offset, 0));
  }
}
@media (max-width: 767px) {
  .twz-hero--default {
    --hero-padding-block-end: 0;
  }
}
@media (max-width: 767px) {
  .twz-hero--default .twz-hero__media {
    margin-bottom: -3rem;
    inline-size: min(70%, 45rem);
    margin-left: auto;
    scale: 1;
  }
}
.twz-hero--fill-height + .twz-divider {
  position: relative;
}
.twz-hero--fill-height .twz-hero__inner {
  align-items: stretch;
}
.twz-hero--fill-height .twz-hero__media {
  margin-top: calc(var(--hero-padding-block-start) * -1);
  margin-bottom: calc(var(--hero-padding-block-end) * -1 + 1rem);
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
  z-index: 0;
}
@media (max-width: 767px) {
  .twz-hero--fill-height .twz-hero__media {
    margin-top: calc((var(--nav-height) + 2rem) * -1);
  }
}
.twz-hero--fill-height .twz-hero__media img {
  position: absolute;
  max-width: unset;
}
.twz-hero--fill-height .twz-hero__image, .twz-hero--fill-height .twz-hero__media img {
  inline-size: auto;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom right;
     object-position: bottom right;
}
.twz-hero__image, .twz-hero__image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: bottom right;
     object-position: bottom right;
}
.twz-hero__contact-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  inline-size: min(71.1rem, 100%);
  margin-block-start: 4rem;
}
.twz-hero .twz-hero__contact-card {
  position: relative;
  flex: 1 1 calc(50% - 1rem);
  min-inline-size: min(100%, 28rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.6rem;
  padding: 3rem 2.3rem 3rem 8.5rem;
  background-color: var(--beige-100);
  color: inherit;
  text-decoration: none;
}
@media (max-width: 767px) {
  .twz-hero .twz-hero__contact-card {
    flex-basis: 100%;
    padding-inline: 2rem 2rem;
    padding-block: 5.5rem 2.5rem;
  }
}
.twz-hero__contact-icon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  padding: 1.5rem 1.2rem;
  border: 0.1rem solid var(--brown-200);
  background-color: var(--beige-200);
  color: var(--hero-text-color);
}
.twz-hero__contact-icon .twz-icon {
  inline-size: 2rem;
  block-size: 2rem;
}
.twz-hero__contact-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.twz-hero__contact-title {
  margin: 0;
}
.twz-hero__contact-value {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lineheight-base);
}
.twz-hero--slider {
  --row-maxwidth: var(--row-m);
  --hero-media-offset: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block-end: calc(var(--hero-padding-block-end) + 8rem);
}
.twz-hero--slider .twz-hero__nav-mobile {
  display: none;
}
.twz-hero--slider .twz-hero__viewport {
  flex: 1;
  z-index: 2;
}
.twz-hero--slider .twz-hero__track {
  inline-size: 100%;
  block-size: 100%;
  display: grid;
}
.twz-hero--slider .twz-hero__slide {
  grid-column: 1/-1;
  grid-row: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.twz-hero--slider .twz-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}
.twz-hero--slider .twz-hero__inner {
  min-block-size: calc(var(--hero-min-height) - var(--hero-padding-block-start) - var(--hero-padding-block-end));
}
.twz-hero--slider .twz-hero__nav {
  position: absolute;
  inset-block-end: calc(var(--hero-padding-block-end) + 1rem);
  inset-inline-start: var(--hero-padding-inline);
  display: flex;
  gap: 1.3rem;
  inline-size: min(57.1rem, 100% - var(--hero-padding-inline) * 2);
  z-index: 4;
  width: min(57.1rem, 100%);
}
@media (max-width: 767px) {
  .twz-hero--slider .twz-hero__nav {
    position: absolute;
    inset-block-end: 19.9rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: min(37.2rem, 100% - var(--hero-padding-inline) * 2);
    flex-direction: column;
    gap: 0;
    margin-block-start: 0;
  }
}
.twz-hero--slider .twz-hero__nav-tabs {
  display: flex;
  gap: 1.3rem;
  inline-size: 100%;
}
@media (max-width: 767px) {
  .twz-hero--slider .twz-hero__nav-tabs {
    position: absolute;
    inline-size: 0.1rem;
    block-size: 0.1rem;
    overflow: clip;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 767px) {
  .twz-hero--slider .twz-hero__nav-mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inline-size: 100%;
  }
}
.twz-hero--slider .twz-hero__nav-labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  inline-size: 100%;
  font-size: var(--fs-12);
  line-height: var(--lineheight-base);
}
.twz-hero--slider .twz-hero__nav-current {
  font-weight: 700;
}
.twz-hero--slider .twz-hero__nav-next {
  font-weight: 400;
}
.twz-hero--slider .twz-hero__nav-track {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 0.6rem;
  border: 0.1rem solid var(--brown-900);
}
.twz-hero--slider .twz-hero__nav-progress {
  position: absolute;
  inset: 0;
  block-size: 100%;
  inline-size: 0;
  background-color: var(--brown-900);
  transition: inline-size 0.1s linear;
}
@media (max-width: 767px) {
  .twz-hero--slider {
    --hero-padding-inline: 1.5rem;
    padding-inline: var(--hero-padding-inline) 5rem;
    padding-block-end: 5.8rem;
  }
  .twz-hero--slider .twz-hero__viewport {
    min-block-size: 45rem;
  }
  .twz-hero--slider .twz-hero__inner {
    min-block-size: auto;
    gap: 1.8rem;
  }
  .twz-hero--slider .twz-hero__content {
    gap: 1.8rem;
  }
  .twz-hero--slider .twz-hero__media {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 3rem;
    inline-size: min(45rem, 80vw);
    block-size: 24.2rem;
    max-width: none;
    scale: 1;
    margin: 0;
  }
  .home .twz-hero--slider .twz-hero__media {
    margin-right: 0;
  }
  .twz-hero--slider .twz-hero__image,
  .twz-hero--slider .twz-hero__image img {
    inline-size: 100%;
    block-size: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: bottom right;
       object-position: bottom right;
  }
}
@media (max-width: 767px) and (min-width: 768px) {
  .twz-hero--slider:not(.twz-hero--no-overlap) .twz-hero__media {
    margin-bottom: calc(var(--hero-padding-block-end) * -1);
  }
}
.twz-hero--slider .twz-hero__tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hero-text-color);
  font: inherit;
  text-align: start;
  cursor: pointer;
  align-items: flex-start;
}
.twz-hero--slider .twz-hero__tab.is-active .twz-hero__tab-label {
  font-weight: 700;
}
.twz-hero--slider .twz-hero__tab.is-complete .twz-hero__tab-progress {
  inline-size: 100%;
}
.twz-hero--slider .twz-hero__tab-label {
  font-size: var(--fs-16);
  line-height: var(--lineheight-base);
}
.twz-hero--slider .twz-hero__tab-track {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 0.6rem;
  border: 0.1rem solid var(--brown-900);
}
.twz-hero--slider .twz-hero__tab-progress {
  position: absolute;
  inline-size: 0;
  inset: 0;
  block-size: 100%;
  background-color: var(--brown-900);
  transition: inline-size 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .twz-hero--slider .twz-hero__slide {
    transition: none;
  }
  .twz-hero--slider .twz-hero__tab-progress, .twz-hero--slider .twz-hero__nav-progress {
    transition: none;
  }
}
.twz-hero + .twz-divider {
  z-index: 1;
}