/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/cards/card-recipe/src/card-recipe.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.twz-card-recipe.twz-card {
  --card-recipe-bg: var(--beige-200);
  position: relative;
  display: grid;
  inline-size: 100%;
  color: var(--text-color-dark);
  text-decoration: none;
  overflow: clip;
  align-items: flex-end;
}
.twz-card-recipe:hover .twz-card-recipe__body::before {
  scale: -1.01 1.01;
}
.twz-card-recipe:hover .twz-card-recipe__arrow {
  translate: 0.3rem 0;
}
.twz-card-recipe.twz-card-recipe {
  text-decoration: none;
}
.twz-card-recipe__media, .twz-card-recipe__body {
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.twz-card-recipe .twz-card-recipe__media {
  position: relative;
  display: block;
  overflow: clip;
  height: 100%;
}
.twz-card-recipe .twz-card-recipe__image,
.twz-card-recipe .twz-card-recipe__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4/3;
}
@media (max-width: 767px) {
  .twz-card-recipe .twz-card-recipe__image,
  .twz-card-recipe .twz-card-recipe__media img {
    max-height: 22rem;
  }
}
.twz-card-recipe__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem var(--card-recipe-padding-right, 1.5rem) var(--card-recipe-padding-bottom, 1.5rem) var(--card-recipe-padding-left, 2.5rem);
  isolation: isolate;
  margin: var(--card-recipe-margin, 1rem);
}
.twz-card-recipe__body:has(.twz-badge) {
  padding-top: 2rem;
}
.twz-card-recipe__body .twz-badge {
  position: absolute;
  top: -0.5rem;
  inset-inline-start: var(--card-recipe-padding-left, 2.5rem);
}
.twz-card-recipe__body::before {
  content: "";
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--card-recipe-bg, --beige-200);
  z-index: -1;
  scale: -1 1;
  transition: all 0.2s ease;
  overflow: clip;
  clip-path: url(#twz-shape-organic-panel);
}
.twz-card-recipe__title {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--brown-900);
}
.twz-card-recipe__content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1 1 auto;
  min-inline-size: 0;
  padding-block-start: 0.7rem;
}
.twz-card-recipe__arrow {
  flex-shrink: 0;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  transition: all 0.2s ease;
  margin-inline-end: 2rem;
}
.twz-card-recipe__arrow .twz-icon {
  --twz-icon-fill: var(--brown-900);
  inline-size: 100%;
  block-size: 100%;
  rotate: 180deg;
}
.twz-card-recipe--featured {
  --card-recipe-margin: 2rem;
  min-block-size: 43.7rem;
}
@media (max-width: 767px) {
  .twz-card-recipe--featured {
    min-block-size: 22rem;
  }
}
.twz-card-recipe--featured .twz-card-recipe__media,
.twz-card-recipe--featured .twz-card-recipe__image {
  block-size: 100%;
  min-block-size: 100%;
}
.twz-card-recipe--featured .twz-card-recipe__body {
  flex-direction: row;
  align-items: flex-end;
  gap: 1rem;
}
.twz-card-recipe--featured .twz-card-recipe__title {
  font-size: var(--fs-22);
}
.twz-card-recipe--default .twz-card-recipe__title {
  font-size: var(--fs-18);
}
.twz-sf-column.column--extras .twz-card-recipe {
  --card-recipe-bg: var(--beige-100);
}