/* Image Grid Styles */
image-grid {
  display: block;
}

image-grid .grid {
  column-count: 6; /* Increased from 4 to 6 for more columns */
  column-gap: 16px; /* Reduced gap for tighter layout */
  padding: 20px 0;
}

@media (max-width: 1600px) {
  image-grid .grid {
    column-count: 5;
  }
}

@media (max-width: 1200px) {
  image-grid .grid {
    column-count: 4;
  }
}

@media (max-width: 900px) {
  image-grid .grid {
    column-count: 3;
  }
}

@media (max-width: 768px) {
  image-grid .grid {
    column-count: 2;
    column-gap: 36px;
  }
}

@media (max-width: 480px) {
  image-grid .grid {
    column-count: 1;
  }
}

image-grid .scroll-sentinel {
  height: 10px;
  visibility: hidden;
}

image-grid .empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
}

image-grid .grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding: 20px 0;
}

image-grid .masonry-layout {
  column-count: 6;
  column-gap: 16px;
  padding: 20px 0;
}

@media (max-width: 1600px) {
  image-grid .masonry-layout {
    column-count: 5;
  }
  image-grid .grid-layout {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }
}

@media (max-width: 1200px) {
  image-grid .masonry-layout {
    column-count: 4;
  }
  image-grid .grid-layout {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 900px) {
  image-grid .masonry-layout {
    column-count: 3;
  }
}

@media (max-width: 768px) {
  image-grid .masonry-layout {
    column-count: 2;
    column-gap: 36px;
  }
  image-grid .grid-layout {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 36px;
  }
}

@media (max-width: 480px) {
  image-grid .masonry-layout {
    column-count: 1;
  }
  image-grid .grid-layout {
    grid-template-columns: 1fr;
  }
}