.ilg-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:32px;
  background:transparent;
  padding:32px;
  box-sizing:border-box;
  margin:0;
  width:100%;
  grid-auto-rows: auto;
  align-items: stretch;
}

.ilg-item{
  position:relative;
  overflow:hidden;
  background:transparent;
  border-radius:8px;
  display:flex;
  width:100%;
  height: 100%;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.ilg-item  img{
  height: 100% !important;
}


.ilg-item.ilg-landscape{
  aspect-ratio: 1.91 / 1; /* Instagram landscape standard (1080x566) */
}

.ilg-item.ilg-square{
  aspect-ratio: 1 / 1; /* Instagram square (1080x1080) */
}


.ilg-item:hover{
  transform:scale(1.02);
  box-shadow:0 8px 24px rgba(0, 0, 0, 0.4);
}

.ilg-item a{
  width:100%;
  height:100%;
  display:grid;
  overflow:hidden;
  border-radius:8px;
  min-height: 100%;
}

.ilg-item img,
.ilg-video{
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
  border-radius:8px;
}

/* Video styles: hide controls, make clickable */
.ilg-video{
  cursor:pointer;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:8px;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.ilg-video::-webkit-media-controls {
  display: none !important;
}

.ilg-video::-moz-media-controls {
  display: none !important;
}

.ilg-video::-webkit-media-controls-enclosure {
  display: none !important;
}

.ilg-video::-webkit-media-controls-panel {
  display: none !important;
}

/* Play icon overlay */
.ilg-play-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:60px;
  height:60px;
  background:rgba(255,255,255,0.9);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:all 0.3s ease;
  z-index:5;
  opacity:1;
}

.ilg-play-overlay::after{
  content:'';
  width:0;
  height:0;
  border-left:18px solid #052b87;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  margin-left:4px;
}

.ilg-item:hover .ilg-play-overlay{
  transform:translate(-50%, -50%) scale(1.1);
  background:rgba(255,255,255,1);
}

.ilg-item.ilg-story{
  border:2px solid rgba(255,255,255,0.15);
}

.ilg-error{ 
  color:#ff6b6b; 
  padding:20px;
  background:#fff;
  border-radius:8px;
  font-weight:600;
}

/* Responsive: fewer columns on smaller screens */
@media (max-width: 1400px){
  .ilg-grid{ grid-template-columns: repeat(4, 1fr); gap:28px; padding:28px; }
  .ilg-play-overlay{ width:50px; height:50px; }
  .ilg-play-overlay::after{ border-left:14px solid #052b87; border-top:8px solid transparent; border-bottom:8px solid transparent; }
}

@media (max-width: 1000px){
  .ilg-grid{ grid-template-columns: repeat(3, 1fr); gap:24px; padding:24px; }
  .ilg-play-overlay{ width:45px; height:45px; }
  .ilg-play-overlay::after{ border-left:12px solid #052b87; border-top:7px solid transparent; border-bottom:7px solid transparent; }
}

@media (max-width: 768px){
  .ilg-grid{ grid-template-columns: repeat(2, 1fr); gap:20px; padding:20px; }
  .ilg-play-overlay{ width:40px; height:40px; }
  .ilg-play-overlay::after{ border-left:10px solid #052b87; border-top:6px solid transparent; border-bottom:6px solid transparent; }
}

@media (max-width: 480px){
  .ilg-grid{ grid-template-columns: 1fr; gap:16px; padding:16px; }
  .ilg-play-overlay{ width:35px; height:35px; }
  .ilg-play-overlay::after{ border-left:8px solid #052b87; border-top:5px solid transparent; border-bottom:5px solid transparent; }
}