.acf-gallery-alt-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;  /* desktop */
  gap: 15px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Larger column on the left, if requested */
.acf-gallery-alt-layout.layout-left {
  grid-template-columns: 2fr 1fr;
}

/* Left column is two stacked images on desktop */
.left-images {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  height: 600px;                 /* desktop height */
}
.right-image { height: 600px; }  /* desktop height */

.gallery-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
  border-radius: 8px;
  overflow: hidden;
}

/* === Fallbacks for 1–2 images === */
.acf-gallery-alt-layout.count-2 .pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.acf-gallery-alt-layout.count-2 .pair-grid .gallery-image,
.acf-gallery-alt-layout.count-1 .solo .gallery-image {
  aspect-ratio: 1 / 1;
  background-position: center;
}

@media (max-width: 768px) {
  /* Mobile: big square on top, then two squares underneath */
  .acf-gallery-alt-layout.count-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Make the wrapper of the two smaller images vanish so its children can
     participate in the parent grid areas */
  .acf-gallery-alt-layout.count-3 .left-images { display: contents; }

  /* Define the layout with named areas: hero (top, spans 2 cols), then a & b */
  .acf-gallery-alt-layout.count-3 {
    display: grid;
    grid-template-areas:
      "hero hero"
      "a    b";
  }
  .acf-gallery-alt-layout.count-3 .right-image { grid-area: hero; height: auto; }
  .acf-gallery-alt-layout.count-3 .left-top   { grid-area: a; }
  .acf-gallery-alt-layout.count-3 .left-bottom{ grid-area: b; }

  /* Make every tile a square on mobile */
  .acf-gallery-alt-layout.count-3 .gallery-image {
    height: auto;
    aspect-ratio: 1 / 1;
    background-position: center;
  }

  /* Remove fixed desktop heights on mobile */
  .left-images, .right-image { height: auto; }

  /* 2-image and 1-image variants stay square */
  .acf-gallery-alt-layout.count-2 .pair-grid .gallery-image,
  .acf-gallery-alt-layout.count-1 .solo .gallery-image {
    aspect-ratio: 1 / 1;
  }
}