/* 1. Global shared styles for all montage images (Applies to both Mobile & Desktop) */

.montage-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-radius: 8px;
  transition: transform 0.3s ease, z-index 0s;
}

/* Pop an image out on hover */

.montage-img:hover {
  transform: scale(1.05);
  z-index: 20 !important;
}

/* 2. Mobile Layout (Default style for screens under 768px wide) */

.montage-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  max-width: 500px;
  margin: 0 auto;
}

/* 3. Desktop Montage Layout (Triggers only on Tablets/Desktops 768px and wider) */

@media (min-width: 768px) {
  .montage-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 120px);
    gap: 15px;
    max-width: 1000px;
    padding: 20px;
  }
}

@media (min-width: 576px) {
  .montage-img {
    height: 100%;
  }
}

/* Overlapping placement rules [grid-column / grid-row / layer-depth] */

@media (min-width: 768px) {
  .img-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    z-index: 1;
  }
}

@media (min-width: 768px) {
  .img-2 {
    grid-column: 2 / 5;
    grid-row: 1 / 3;
    z-index: 2;
  }
}

@media (min-width: 768px) {
  .img-3 {
    grid-column: 4 / 7;
    grid-row: 1 / 4;
    z-index: 1;
  }
}

@media (min-width: 768px) {
  .img-4 {
    grid-column: 1 / 3;
    grid-row: 3 / 5;
    z-index: 3;
  }
}

@media (min-width: 768px) {
  .img-5 {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    z-index: 4;
  }
}

@media (min-width: 768px) {
  .img-6 {
    grid-column: 4 / 6;
    grid-row: 2 / 5;
    z-index: 2;
  }
}

@media (min-width: 768px) {
  .img-7 {
    grid-column: 5 / 7;
    grid-row: 3 / 5;
    z-index: 3;
  }
}

@media (min-width: 768px) {
  .img-8 {
    grid-column: 1 / 3;
    grid-row: 4 / 6;
    z-index: 2;
  }
}

@media (min-width: 768px) {
  .img-9 {
    grid-column: 3 / 6;
    grid-row: 4 / 6;
    z-index: 5;
  }
}

@media (min-width: 768px) {
  .img-10 {
    grid-column: 4 / 7;
    grid-row: 3/ 6;
    z-index: 1;
  }
}