.bravest-home.brv-section.et_pb_section:has(.brv-pergola-story) {
  padding-top: clamp(22px, 4vw, 52px) !important;
  padding-bottom: clamp(30px, 4vw, 52px) !important;
}

.brv-pergola-story__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}

.brv-pergola-story__copy h2 {
  max-width: 16ch;
  font-size: clamp(29px, 4.1vw, 59px);
  line-height: 1.1;
  text-wrap: balance;
}

.brv-pergola-story__copy p { max-width: 60ch; }
.brv-pergola-story__copy p a { text-decoration: underline; text-underline-offset: 3px; }

.brv-pergola-story__design {
  padding: clamp(20px, 3vw, 38px);
  border-inline-start: 3px solid #ed1c24;
  background: #f5f3f1;
}

.brv-pergola-story__design h3,
.brv-pergola-story__gallery h3 {
  color: #252222;
  font-family: var(--bravest-display, Arial, sans-serif);
  font-size: clamp(24px, 2.7vw, 39px);
  font-weight: 750;
  line-height: 1.18;
  text-wrap: balance;
}

.brv-pergola-story__design .brv-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.brv-pergola-story .brv-pergola-triptych {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(10px, 1.4vw, 20px);
  margin-top: clamp(25px, 4vw, 52px);
}

.brv-pergola-triptych figure { margin: 0; min-width: 0; }

.brv-pergola-story .brv-pergola-triptych figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.brv-pergola-triptych figure:nth-child(2) img { object-position: 54% 43%; }
.brv-pergola-triptych figcaption { padding: 9px 0 0; color: #252222; font-size: 14px; line-height: 1.4; }
.brv-pergola-triptych figcaption span { display: block; color: #605c5c; font-size: 12px; margin-top: 2px; }

.brv-pergola-story__gallery {
  max-width: 900px;
  margin: clamp(32px, 5vw, 66px) auto 0;
}

.brv-reference-carousel.brv-reference-carousel--pergola,
.brv-reference-carousel--pergola .brv-slides,
.brv-reference-carousel--pergola .brv-slide {
  min-height: 0;
  height: auto;
  background: transparent;
  overflow: visible;
}

.brv-reference-carousel.brv-reference-carousel--pergola .brv-slide img {
  aspect-ratio: 3 / 2;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  object-fit: cover;
  transform: none;
  transition: none;
}

.brv-reference-carousel--pergola .brv-slide figcaption {
  position: static;
  padding: 10px 0 0;
  color: #252222;
  text-align: left;
  text-shadow: none;
}

.brv-reference-carousel--pergola .brv-carousel-controls {
  position: static;
  justify-content: flex-start;
  gap: 5px;
  padding: 10px 0 0;
}

.brv-reference-carousel--pergola .brv-carousel-controls button {
  border-color: #393536;
  background: #fff;
  color: #252222;
}

.brv-reference-carousel--pergola .brv-carousel-controls button:hover { background: #393536; color: #fff; }
.brv-reference-carousel--pergola .brv-carousel-controls button:focus-visible { outline-color: #b71920; }
.brv-reference-carousel--pergola .brv-carousel-controls [data-brv-dots] button::before { background: #c8c6c6; }
.brv-reference-carousel--pergola .brv-carousel-controls [data-brv-dots] button[aria-current='true']::before { background: #252222; }

.bravest-home.brv-section.et_pb_section:has(.brv-pergola-comparison) {
  padding-top: clamp(25px, 4vw, 50px) !important;
  padding-bottom: clamp(16px, 2.6vw, 36px) !important;
}

.brv-pergola-comparison[data-brv-compare] {
  max-width: 680px;
  margin: clamp(16px, 2.4vw, 30px) auto 0;
}

.brv-pergola-comparison .brv-compare-images { aspect-ratio: 4 / 3; }
.brv-pergola-comparison .brv-compare-controls { margin-top: 9px; }
.brv-pergola-comparison figcaption { color: #605c5c; font-size: 13px; line-height: 1.45; }

body.et-db #et-boc .et-l .brv3-pergola-types .brv3-card-title h3 {
  font-size: clamp(17px, 1.22vw, 22px);
}

@supports (grid-template-rows: subgrid) {
  @media (min-width: 601px) {
    body.et-db #et-boc .et-l .brv3-pergola-types .brv3-card-row { row-gap: 0; }

    body.et-db #et-boc .et-l .brv3-pergola-types .brv3-card-row > .et_pb_column {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
    }

    body.et-db #et-boc .et-l .brv3-pergola-types .brv3-card-title {
      min-height: 0;
      margin-bottom: 18px !important;
    }
  }

  @media (min-width: 601px) and (max-width: 980px) {
    body.et-db #et-boc .et-l .brv3-pergola-types .brv3-card-row > .et_pb_column:nth-child(n+3) {
      margin-top: 42px !important;
    }
  }
}

@media (max-width: 760px) {
  .brv-pergola-story__intro { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  body.et-db #et-boc .et-l .brv3-pergola-types .brv3-card-title h3 { font-size: 20px; }
  .brv-pergola-story .brv-pergola-triptych { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brv-pergola-triptych figure:first-child { grid-column: 1 / -1; }
  .brv-reference-carousel--pergola .brv-carousel-controls { gap: 2px; }
  .brv-reference-carousel--pergola .brv-carousel-controls [data-brv-dots] button { width: 28px; min-width: 28px; }
  .brv-reference-carousel--pergola .brv-carousel-controls [data-brv-dots] button::before { left: 8px; }
}