.quintain-building-hero-two-col {
  .building-hero-two-col-left-top,
  .building-hero-two-col-left-bottom {
    display: flex;
    flex-flow: column;
    gap: 30px;
  }

  /* Positioning context for overlay blocks placed in the right (gallery)
     region — e.g. Building Hero Labels — so their absolute position anchors to the
     gallery box rather than the padded column. */
  .building-hero-two-col-right-region {
    position: relative;
  }
}

/* Mobile: break the gallery region out of the Bootstrap container/column
   padding so the hero gallery runs full viewport width, matching the design. */
@media (max-width: 767px) {
  .quintain-building-hero-two-col {
    .building-hero-two-col-left-top,
    .building-hero-two-col-left-bottom {
      gap: 14px;
    }

    .building-hero-two-col-right-region {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
  }
}


/* Hero two-column layout — pin only the CTA buttons to the bottom of their
   region so they line up with the pricing block, keeping the features in
   natural flow above them.

   Tablet (md): the pricing (top region) and the features + CTA (bottom region)
   sit side by side; the bottom region stretches to the pricing region's height,
   so pushing the CTA down aligns it with the pricing block's bottom line.

   The CTA markup is wrapped in a responsive-visibility div (e.g.
   `.d-none.d-md-block`) that is the actual flex item here, not
   `.building-hero-cta-block` itself — target that wrapper via :has() so the
   margin-top: auto takes effect regardless of which visibility classes are
   applied to it. */
@media (min-width: 768px) {
  .quintain-building-hero-two-col {
    .building-hero-two-col-left-bottom {
      display: flex;
      flex-direction: column;

      > div:has(.building-hero-cta-block) {
        margin-top: auto !important;
      }
    }
  }
}

/* Desktop (lg): the two regions stack vertically and the left column stretches
   to the gallery's 16:9 height. Lay them out as a flex column and let the
   bottom region grow so the CTA keeps bottom-aligning with the gallery. */
@media (min-width: 992px) {
  .quintain-building-hero-two-col {
    .building-hero-two-col-left {
      display: flex;
      flex-direction: column;
    }

    /* The gallery's aspect-ratio height and the sidebar's natural content
       height rarely match exactly (different building names/addresses/feature
       counts), leaving a gap below the image even though the CTA is pushed
       to the stretched column's bottom. Let the gallery fill the column's
       full height instead so its visible bottom edge always lines up with
       the CTA — object-fit: cover on the image absorbs the height change. */
    .building-hero-two-col-right-region {
      height: 100%;

      .building-hero-gallery-block,
      .m-hero {
        height: 100%;
      }

      .m-hero {
        aspect-ratio: unset;
      }
    }
  }
}

/* Extra-large (xl): the outer left/right columns finally sit side by side with
   the gallery (Bootstrap col-xl-4/col-xl-8) and the title/description regions
   inside the left column switch from side-by-side (col-md-5/col-md-7, lg's
   layout above) to stacked (col-xl-12/col-xl-12) — only at this width does the
   left column's inner `.row` need to be a flex column so the bottom region can
   grow and push the CTA down to match the gallery's stretched height. Scoping
   this to xl (rather than lg's 992px) keeps the lg side-by-side title/
   description layout (title narrow column, description+CTA wider column,
   both natural height, no bottom-pinning) untouched. */
@media (min-width: 1200px) {
  .quintain-building-hero-two-col {
    .building-hero-two-col-left {
      > .row {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;

        /* Bootstrap cols set flex-basis:100%, which is a width in a normal
           row but becomes a 100%-height basis once the row is a column —
           reset it so each region sizes to its own content instead. */
        > * {
          flex: 0 0 auto;
        }

        .building-hero-two-col-left-bottom {
          flex: 1 1 auto;
        }
      }
    }
  }
}

.layout-hero-container {
  background-color: #f1f1f1;

  .container {
    @media (min-width: 1200px) {
      max-width: 1311px;
      padding-top: .75rem;
    }
  }
}