.quintain-unit-hero-two-col {
  .unit-hero-two-col-left-top,
  .unit-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. Unit Hero Labels — so their absolute position anchors to the
     gallery box rather than the padded column. */
  .unit-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-unit-hero-two-col {
    .unit-hero-two-col-left-top,
    .unit-hero-two-col-left-bottom {
      gap: 14px;
    }

    .unit-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
   `.unit-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-unit-hero-two-col {
    .unit-hero-two-col-left-bottom {
      display: flex;
      flex-direction: column;

      > div:has(.unit-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-unit-hero-two-col {
    .unit-hero-two-col-left-top {
      display: flex;
      flex-direction: column;

      > .row {
        flex: 1 1 auto;
        flex-direction: column;
        flex-wrap: nowrap;

        /* 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;
        }

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

    /* The gallery's aspect-ratio height and the sidebar's natural content
       height rarely match exactly (different unit 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. */
    .unit-hero-two-col-right-region {
      height: 100%;

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

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