/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/cta/src/cta.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************/
.twz-cta {
  --cta-bg: var(--brown-900);
  --cta-color: var(--text-color-light);
  --cta-icon-color: var(--beige-400);
  --text-color: var(--text-color-light);
  position: relative;
  color: var(--cta-color);
  isolation: isolate;
}
.twz-cta::before {
  content: "";
  position: absolute;
  block-size: 100%;
  inline-size: 100%;
  background-color: var(--cta-bg);
  z-index: -1;
  scale: -1 1;
  transition: all 0.2s ease;
  overflow: clip;
  clip-path: url(#twz-shape-organic-panel);
}
.twz-cta.twz-cta {
  text-decoration: none;
}
.twz-cta__panel {
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
  block-size: 100%;
  isolation: isolate;
  overflow: clip;
}
.twz-cta__content {
  position: relative;
  inline-size: 100%;
}
.twz-cta__text {
  font-family: var(--font-special);
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--cta-color);
  max-inline-size: 20rem;
}
.twz-cta__icon {
  inset-inline-end: 5.3rem;
  inset-block-end: 1.8rem;
  transition: margin 0.2s ease;
}
.twz-cta__icon .twz-icon {
  --twz-icon-fill: var(--cta-icon-color);
  rotate: 180deg;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  margin-left: 2rem;
}
.twz-cta__media {
  position: relative;
  min-inline-size: 0;
}
.twz-cta__image, .twz-cta__image img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: scale 0.2s ease;
}
.twz-cta .btn {
  z-index: 5;
}
.twz-cta--default {
  --cta-padding-y: 6.1rem;
  --cta-padding-x: 4.5rem;
  inline-size: 100%;
}
@media (max-width: 767px) {
  .twz-cta--default:before {
    width: 150vw;
    left: 50%;
    translate: -50% 0;
    border-radius: 0;
  }
}
.twz-cta--default .twz-cta__inner {
  position: relative;
  display: grid;
  inline-size: min(100%, 130rem);
  margin-inline: auto;
  padding: var(--cta-padding-y) var(--cta-padding-x);
  min-block-size: var(--cta-default-min-block-size, 49rem);
  align-items: center;
}
.twz-cta--default .twz-cta__media {
  display: flex;
  justify-content: center;
  block-size: 100%;
  overflow: visible;
}
.twz-cta--default .twz-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  padding-inline: var(--cta-content-padding-x, 5.9rem) var(--cta-content-padding-x, 6.3rem);
}
.twz-cta--default .twz-cta__copy {
  display: flex;
  flex-direction: column;
  text-align: center;
  inline-size: min(100%, 67.1rem);
}
.twz-cta--default .twz-cta__copy :where(h1, h2, h3, h4, h5, h6) {
  color: var(--beige-200);
}
.twz-cta--default .twz-cta__copy :where(p) {
  color: var(--beige-100);
  margin-top: 0;
}
.twz-cta--default .twz-cta__action {
  display: flex;
  justify-content: center;
}
.twz-cta--layout-two-thirds-one-third .twz-cta__inner {
  grid-template-columns: 1fr 2fr;
}
.twz-cta--layout-half-half .twz-cta__inner {
  grid-template-columns: 1fr 1fr;
}
.twz-cta--align-top .twz-cta__media {
  align-items: flex-start;
  justify-content: flex-start;
}
.twz-cta--align-center .twz-cta__media {
  align-items: center;
}
.twz-cta--align-bottom .twz-cta__media {
  align-items: flex-end;
  justify-content: flex-start;
}
@media (min-width: 768px) {
  .twz-cta--align-bottom .twz-cta__media {
    margin-bottom: calc(var(--cta-padding-y) * -1);
  }
}
.twz-cta--small {
  display: inline-flex;
  align-items: center;
  inline-size: 100%;
  color: var(--cta-color);
  text-decoration: none;
  min-block-size: 13.2rem;
}
.twz-cta--small:hover::before {
  translate: 0.3rem 0;
  rotate: 1deg;
}
.twz-cta--small:hover .twz-cta__media {
  rotate: -2deg;
}
.twz-cta--small:hover .twz-cta__icon {
  margin-left: 0.7rem;
}
.twz-cta--small .twz-cta__content {
  padding: 1.1rem 1.5rem 1.1rem 6rem;
  gap: 0;
  max-width: 28rem;
}
.twz-cta--small .twz-cta__text {
  font-size: var(--fs-24);
  max-inline-size: 20rem;
}
.twz-cta--small .twz-cta__icon {
  inset-inline-end: 1.5rem;
  inset-block-end: 1.1rem;
}
.twz-cta--small .twz-cta__media {
  margin-bottom: -6rem;
  margin-right: -6rem;
  transition: rotate 0.2s ease;
}
@media (max-width: 767px) {
  .twz-cta--small .twz-cta__media {
    display: none;
  }
}
.twz-cta:is(:hover, :focus-visible) img {
  scale: 1.05;
}
@media (max-width: 1024px) {
  .twz-cta--default {
    --cta-padding-y: 5.5rem;
    --cta-padding-x: 0;
  }
  .twz-cta--default .twz-cta__inner {
    grid-template-columns: 1fr;
    min-block-size: auto;
    gap: 2rem;
  }
  .twz-cta--default .twz-cta__content {
    padding-inline: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .twz-cta {
    transition: none;
  }
  .twz-cta::before,
  .twz-cta .twz-cta__icon,
  .twz-cta .twz-cta__media {
    transition: none;
  }
}