<style>
  .container-fluid {
  width: 98vw;        /* 98% of viewport width */
  max-width: 98vw;    /* prevent Bootstrap max-width override */
  margin: 0 auto;     /* center horizontally */
  padding: 0rem;
}
/* ---------- Layout & borders ---------- */
.container-fluid { padding: 1.25rem; }
.main-row {
  border: 2px solid white;
  border-radius: 20px;
  overflow: hidden;           /* make outer rounding clip content */
  background: #FFFFFF;
}

/* Remove border/padding from column internal cells */
.col-md-4, .col-md-12 { padding: 0; }

/* white 3px border around each inner "card" */
.card-frame {
  border: 2px solid white;
  overflow: hidden;
  position: relative;
  background: #000;
}

/* Round only the four outer corners on their respective card frames */
.col-md-4:first-child .card-frame.top  { border-top-left-radius: 20px; }
.col-md-4:first-child .card-frame.bottom { border-bottom-left-radius: 20px; }
.col-md-4:last-child  .card-frame.top  { border-top-right-radius: 20px; }
.col-md-4:last-child  .card-frame.bottom { border-bottom-right-radius: 20px; }

/* ---------- Carousel styling ---------- */
.carousel,
.carousel-inner,
.carousel-item {
  height: 100%;
  width: 100%;
  border-radius: 0 !important; /* ensure no rounding here */
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Crossfade (smooth overlapping fade) */
.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  position: absolute;
  inset: 0;
}
.carousel-fade .carousel-item.active {
  opacity: 1;
  position: relative;
  z-index: 1;
}

/* Caption & tiny button style */
.carousel-caption {
  position: absolute;
  bottom: 0px;          /* distance from bottom */
  left: 50%;             /* center horizontally */
  transform: translateX(-50%);  /* adjust for perfect centering */
  text-align: center;    /* center the text/button horizontally */
  width: auto;
}

.carousel-caption h5 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 6px;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.btn-outline {
  background: rgba(255,255,255,0.9);
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  -webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.9); /* thin white outline */
  text-shadow: 0 0px 2px rgba(180, 255, 180, 0.3); /* white glow */
}


/* ---------- Make middle column stretch to match stacked neighbors ---------- */
/* The left and right columns each contain two aspect boxes stacked; using flex to match height */
.row.inner-grid {
  display: flex;
  gap: 0;
}
.col-md-4 {
  display: flex;
  flex-direction: column;
}

/* Force middle column to fill the combined height of the two landscape cards.
   We set the middle column's aspect to be portrait and allow it to flex-fill. */
.col-md-4.center {
  flex: auto; /* don't collapse */
}

/* On small screens, change which corners are rounded */
@media (max-width: 767.98px) {
  /* remove all rounding first */
  .card-frame {
    border-radius: 0 !important;
  }

  /* then selectively reapply top and bottom outer rounding */
  .row.inner-grid > .col-md-4:first-child .card-frame.top {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .row.inner-grid > .col-md-4:last-child .card-frame.bottom {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}

.main-row,
.row.inner-grid {
  display: flex;
  align-items: stretch; /* ✅ all columns share the same vertical baseline */
}

/* Each column should fill same height */
.main-row > .col-md-4 {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

/* The center column should not stretch independently */
.col-md-4.center {
  flex: 1 1 0;          /* don’t grow beyond siblings */
  height: auto;         /* let flexbox define equal height */
  align-self: stretch;  /* lock to shared baseline */
}

/* Force all card-frames inside columns to obey parent height */
.card-frame,
.aspect,
.aspect-content,
.carousel,
.carousel-inner,
.carousel-item,
.carousel-item img {
  height: 100%;
  object-fit: cover;
}
.carousel-inner, .carousel-item, .carousel-item img {
  min-height: 100%;
}

</style>