/* Parent wrapper (add this class to the Elementor container holding the 4 divs) */
.acf-gallery-grid{
  display: grid;
  gap: 18px;

  /* 2 columns:
     - left column auto-sizes based on available width
     - right column is the stacked squares column
  */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
}

/* General: each slot should behave like a “frame” */
.acf-gallery-grid #gallery_0,
.acf-gallery-grid #gallery_1,
.acf-gallery-grid #gallery_2,
.acf-gallery-grid #gallery_3{
  width: 100%;
  overflow: hidden;
  border-radius: 0; /* keep clean; Elementor can handle rounding */
}

/* Make imgs fill their frames */
.acf-gallery-grid #gallery_0 img,
.acf-gallery-grid #gallery_1 img,
.acf-gallery-grid #gallery_2 img,
.acf-gallery-grid #gallery_3 img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* HERO: 3/2 landscape, spans full width */
.acf-gallery-grid #gallery_0{
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 3 / 2;
}

/* Image 2: 2/3 portrait on the left, spanning the height of the two squares */
.acf-gallery-grid #gallery_1{
  grid-column: 1;
  grid-row: 2 / span 2;
  aspect-ratio: 2 / 3;
}

/* Image 3: square top-right */
.acf-gallery-grid #gallery_2{
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 1 / 1;
}

/* Image 4: square bottom-right */
.acf-gallery-grid #gallery_3{
  grid-column: 2;
  grid-row: 3;
  aspect-ratio: 1 / 1;
}