.image-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
@media (max-width:1200px){ .image-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){  .image-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){  .image-grid{ grid-template-columns:1fr; } }

.grid-item { position: relative; overflow: hidden; border-radius: 0; }
.grid-item::before { content: ""; display: block; padding-top: 100%; }
.grid-item > a { position: absolute; inset: 0; display: block; }
.grid-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; transition: opacity 0.3s ease;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.grid-item:hover .overlay { opacity: 1; }

.overlay-text { color: #fffff; text-shadow: none; padding: 0 10px; }
.overlay-text h3 { color:#ffffff; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.overlay-text p  { color:#ffffff; margin: 0; font-size: 14px; opacity: 0.9; }