/* Homepage gallery layout based on the approved 12-tile scheme. */
.compact-gallery {
  height: auto !important;
  min-height: 760px !important;
  padding: 76px 0 !important;
}

.gallery-compact-wrap {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.24fr) minmax(0, 0.76fr) !important;
  gap: clamp(38px, 4vw, 66px) !important;
  align-items: center !important;
}

.gallery-mosaic {
  display: grid !important;
  height: 610px !important;
  grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.gallery-mosaic .gallery-item {
  display: block !important;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 15px !important;
}

.gallery-mosaic .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.gallery-mosaic .gm-1  { grid-column: 1 / 7 !important;  grid-row: 1 / 4 !important; }
.gallery-mosaic .gm-2  { grid-column: 7 / 13 !important; grid-row: 1 !important; }
.gallery-mosaic .gm-3  { grid-column: 13 / 16 !important; grid-row: 1 !important; }
.gallery-mosaic .gm-4  { grid-column: 16 / 19 !important; grid-row: 1 !important; }
.gallery-mosaic .gm-5  { grid-column: 19 / 25 !important; grid-row: 1 !important; }
.gallery-mosaic .gm-6  { grid-column: 7 / 10 !important; grid-row: 2 !important; }
.gallery-mosaic .gm-7  { grid-column: 10 / 13 !important; grid-row: 2 !important; }
.gallery-mosaic .gm-8  { grid-column: 13 / 16 !important; grid-row: 2 !important; }
.gallery-mosaic .gm-9  { grid-column: 16 / 19 !important; grid-row: 2 !important; }
.gallery-mosaic .gm-10 { grid-column: 7 / 13 !important; grid-row: 3 !important; }
.gallery-mosaic .gm-11 { grid-column: 13 / 19 !important; grid-row: 3 !important; }
.gallery-mosaic .gm-12 { grid-column: 19 / 25 !important; grid-row: 2 / 4 !important; }

@media (max-width: 1100px) {
  .compact-gallery {
    min-height: 0 !important;
    padding: 68px 0 !important;
  }

  .gallery-compact-wrap {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .gallery-compact-copy {
    max-width: 760px !important;
  }

  .gallery-mosaic {
    height: 620px !important;
  }
}

@media (max-width: 700px) {
  .compact-gallery {
    padding: 56px 0 !important;
  }

  .gallery-mosaic {
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
  }

  .gallery-mosaic .gallery-item,
  .gallery-mosaic .gm-1,
  .gallery-mosaic .gm-2,
  .gallery-mosaic .gm-3,
  .gallery-mosaic .gm-4,
  .gallery-mosaic .gm-5,
  .gallery-mosaic .gm-6,
  .gallery-mosaic .gm-7,
  .gallery-mosaic .gm-8,
  .gallery-mosaic .gm-9,
  .gallery-mosaic .gm-10,
  .gallery-mosaic .gm-11,
  .gallery-mosaic .gm-12 {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .gallery-mosaic .gm-1,
  .gallery-mosaic .gm-3,
  .gallery-mosaic .gm-4,
  .gallery-mosaic .gm-6,
  .gallery-mosaic .gm-7,
  .gallery-mosaic .gm-8,
  .gallery-mosaic .gm-12 {
    aspect-ratio: 3 / 4 !important;
  }
}