/* Homepage 4 Banners - responsive 1-1-2 layout (Classic theme friendly)
   - Desktop: 1 tall (left) + 1 big (center) + 2 stacked (right)
   - Tablet: img1 full row, img2 full row, img3+img4 same row (2 cols)
   - Mobile: all full width
*/

.h4b-wrap {
  margin: 20px 0;
}

/* Desktop: 3 columns */
.h4b-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
  align-items: stretch;
}

/* Right stacked on desktop */
.h4b-rightcol {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

/* Clickable container */
.h4b-link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Images cover without distortion */
.h4b-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 240ms ease;
}

/* Optional subtle hover zoom */
a.h4b-link:hover img {
  transform: scale(1.03);
}

/* Default heights for desktop */
.h4b-center { min-height: 520px; }
.h4b-left { min-height: 520px; }
.h4b-rightcol .h4b-item { min-height: 250px; }

/* Tablet (<=991px):
   1 full row, 2 full row, 3+4 side-by-side */
@media (max-width: 991px) {
  .h4b-grid {
    grid-template-columns: 1fr 1fr;
  }

  .h4b-left,
  .h4b-center {
    grid-column: 1 / -1;
  }

  .h4b-left { min-height: 360px; }
  .h4b-center { min-height: 420px; }

  /* Right column becomes a 2-column row */
  .h4b-rightcol {
    grid-column: 1 / -1;
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .h4b-rightcol .h4b-item {
    min-height: 260px;
  }
}

/* Mobile (<=575px): stack all full width */
@media (max-width: 575px) {
  .h4b-grid {
    grid-template-columns: 1fr;
  }

  .h4b-left,
  .h4b-center {
    min-height: 260px;
  }

  .h4b-rightcol {
    grid-template-columns: 1fr;
  }

  .h4b-rightcol .h4b-item {
    min-height: 220px;
  }
}