/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/text-with-media/src/textwithmedia.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.row:has(.twz-text-with-media) {
  --row-maxwidth: var(--row-m);
}
.row:has(.twz-text-with-media).row--padding-bottom-none:has(+ .row--padding-top-none) {
  --row-offset: 6rem;
  margin-block-end: calc(var(--row-offset) * -1);
}
@media (max-width: 767px) {
  .row:has(.twz-text-with-media).row--padding-bottom-none:has(+ .row--padding-top-none) {
    --row-offset: 2rem;
  }
}
@media (min-width: 768px) {
  .row:has(.twz-text-with-media).row--padding-bottom-none:has(+ .row--padding-top-none) .twz-text-with-media__content-area {
    padding-bottom: calc(var(--row-offset) * 1.5);
  }
}

.twz-text-with-media {
  --text-with-media-gap: 8rem;
  --image-maxH: auto;
  --image-maxW: 50%;
  --block-bg: var(--grey-100);
}
@media (max-width: 767px) {
  .twz-text-with-media {
    --image-maxH: 30rem;
    --text-with-media-gap: 4rem;
  }
}
.twz-text-with-media__wrapper {
  position: relative;
  display: flex;
  gap: var(--text-with-media-gap);
  background-color: var(--block-bg);
}
@media (max-width: 767px) {
  .twz-text-with-media__wrapper {
    flex-direction: column;
  }
}
.twz-text-with-media__media {
  display: flex;
  flex: 0 0 var(--image-maxW);
}
@media (max-width: 767px) {
  .twz-text-with-media__media {
    order: 1;
    flex-basis: auto;
  }
}
.twz-media--end .twz-text-with-media__media {
  justify-content: flex-end;
}
@media (min-width: 768px) {
  .twz-media--end .twz-text-with-media__media {
    order: 1;
  }
}
@media (max-width: 767px) {
  .twz-media--end .twz-text-with-media__media {
    margin-left: var(--offset-x);
  }
}
.twz-media--start .twz-text-with-media__media {
  justify-content: flex-start;
}
@media (max-width: 767px) {
  .twz-media--start .twz-text-with-media__media {
    margin-right: var(--offset-x);
  }
}
.twz-text-with-media__media > * {
  width: 100%;
}
.twz-text-with-media__media .twz-video {
  --video-bg: var(--block-bg);
}
.twz-text-with-media__media .twz-image,
.twz-text-with-media__media iframe,
.twz-text-with-media__media video {
  max-height: var(--image-maxH);
  overflow: clip;
  margin-top: auto;
}
@media (max-width: 767px) {
  .twz-text-with-media__media .twz-image,
  .twz-text-with-media__media iframe,
  .twz-text-with-media__media video {
    flex: 0 0 100%;
    height: var(--image-maxH);
  }
}
.twz-text-with-media__media :is(img, picture, video, iframe) {
  width: 100%;
  height: 100%;
}
.twz-text-with-media__media :is(img, picture) {
  -o-object-fit: cover;
     object-fit: cover;
}
.twz-text-with-media__content-area {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2.1rem;
}
@media (min-width: 768px) {
  .twz-text--center .twz-text-with-media__content-area {
    justify-content: center;
  }
  .twz-text--end .twz-text-with-media__content-area {
    justify-content: flex-end;
  }
  .twz-media--end .twz-text-with-media__content-area {
    padding-right: 0;
  }
  .twz-media--start .twz-text-with-media__content-area {
    padding-left: 0;
  }
}
.twz-text-with-media__content {
  flex: 0 1 auto;
}
.twz-text-with-media__image-below {
  flex: 0 0 auto;
  width: min(100%, 38.4rem);
  margin-inline: auto;
}
.twz-text-with-media__image-below .twz-image,
.twz-text-with-media__image-below :is(img, picture) {
  aspect-ratio: 384/224;
  -o-object-fit: cover;
     object-fit: cover;
}