.site-main.buurthuizen-page {
  gap: 0;
}

.buurthuizen-hero-strip {
  position: relative;
  overflow: visible;
  background: var(--hero-bg);
}

.buurthuizen-hero-strip::after {
  content: "";
  height: var(--section-slope);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
  z-index: 0;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.buurthuizen-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 4rem;
  padding: 0 0 calc(var(--section-pad-y) + var(--section-slope));
}

.buurthuizen-hero__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: var(--section-pad-y);
}

.buurthuizen-hero h1 {
  color: var(--brand-green);
  font-size: var(--section-title-size);
  line-height: var(--section-title-line);
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.buurthuizen-hero h2 {
  margin: 0 0 1.5rem;
  color: var(--brand-green);
  font-family: var(--font-accent);
  font-size: var(--section-subtitle-size);
  font-weight: 300;
  line-height: var(--section-subtitle-line);
  text-wrap: balance;
}

.buurthuizen-hero p {
  color: var(--brand-green);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  text-wrap: pretty;
}

.buurthuizen-hero p + p {
  margin-top: 1.5rem;
}

.buurthuizen-hero__image {
  height: 100%;
  min-height: 100%;
  background: var(--brand-green) center / cover no-repeat;
  border-radius: 0 0 0 2.25rem;
}

.buurthuizen-slider-strip {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: var(--section-stack-gap) 0 calc(var(--section-stack-gap) + var(--section-slope));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--section-slope)), 0 100%);
}

.buurthuizen-slider-strip::after {
  content: none;
}

.buurthuizen-slider-strip > * {
  position: relative;
  z-index: 1;
}

.buurthuizen-slider-strip.pz-theme--beige {
  background: var(--hero-bg);
}

.buurthuizen-slider-strip.pz-theme--white {
  overflow: visible;
  padding-bottom: var(--section-stack-gap);
  clip-path: none;
}

.buurthuizen-slider-strip.pz-theme--green {
  background: var(--brand-green);
}

.buurthuizen-slider-strip.pz-theme--green .buurthuizen-slider-strip__head :where(h2, h3, .pz-richtext, .pz-richtext *) {
  color: #fff;
}

.buurthuizen-slider-strip .home-slider {
  background: transparent;
  margin: 0;
  overflow: hidden;
}

.buurthuizen-slider-strip.pz-theme--green .buurthuis-card__content {
  background: #fff;
}

.buurthuizen-slider-strip.pz-theme--green .buurthuis-card h3,
.buurthuizen-slider-strip.pz-theme--green .buurthuis-card p {
  color: var(--brand-green);
}

.buurthuis-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(22rem, 28vw);
  border-radius: 2.25rem;
  overflow: hidden;
  background: #fff;
  color: #fff;
  text-decoration: none;
}

.buurthuis-card__content {
  --buurthuis-card-slope-rest: 0rem;
  --buurthuis-card-slope-open: 1.45rem;
  --buurthuis-card-title-height: 6.667rem;
  --buurthuis-card-title-line: calc(var(--card-title-size) * var(--accordion-item-line));
  --buurthuis-card-title-offset: calc((var(--buurthuis-card-title-height) - var(--buurthuis-card-title-line)) / 2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 0 0 auto;
  min-height: var(--buurthuis-card-title-height);
  padding: 0 1.5rem;
  margin-bottom: calc(var(--buurthuis-card-slope-open) * -1);
  background: var(--brand-green);
  max-height: var(--buurthuis-card-title-height);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--buurthuis-card-slope-rest)), 0 100%);
  transition: max-height 260ms ease, padding 260ms ease, clip-path 260ms ease;
}

.buurthuis-card h3 {
  margin: var(--buurthuis-card-title-offset) 0 0;
  color: #fff;
  font-size: var(--card-title-size);
  line-height: var(--accordion-item-line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: margin 260ms ease;
}

.buurthuis-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  max-height: 0;
  min-height: 0;
  margin: 0;
  color: #fff;
  font-size: calc(var(--fs-body) * 0.9);
  line-height: calc(var(--lh-body) * 0.9);
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: max-height 260ms ease, opacity 180ms ease, transform 260ms ease;
}

.buurthuis-card:hover .buurthuis-card__content,
.buurthuis-card:focus .buurthuis-card__content,
.buurthuis-card:focus-visible .buurthuis-card__content {
  max-height: 18rem;
  padding-bottom: calc(1.5rem + var(--buurthuis-card-slope-open));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--buurthuis-card-slope-open)), 0 100%);
}

.buurthuis-card:hover h3,
.buurthuis-card:focus h3,
.buurthuis-card:focus-visible h3 {
  margin-bottom: 0.35rem;
}

.buurthuis-card:hover p,
.buurthuis-card:focus p,
.buurthuis-card:focus-visible p {
  max-height: calc(var(--lh-body) * var(--fs-body) * 0.9 * 5);
  opacity: 1;
  transform: translateY(0);
}

.buurthuis-card:focus {
  outline: none;
}

.buurthuis-card:focus-visible {
  box-shadow: 0 0 0 0.2rem currentColor;
}

.buurthuis-card__image {
  flex: 1 1 auto;
  min-height: 8rem;
  background-size: cover;
  background-position: center;
}

@media (max-width: 68.75rem) {
  .buurthuizen-hero {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
  }

  .buurthuizen-hero__image {
    order: 1;
    aspect-ratio: 1;
    min-height: 0;
    border-radius: 0 0 0 2.25rem;
  }

  .buurthuizen-hero__text {
    order: 2;
  }

  .buurthuis-card {
    min-height: 22rem;
  }
}