.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--cream); aspect-ratio: 4/3; box-shadow: var(--shadow); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .gallery-item:hover img { transform: scale(1.05); } .gallery-item .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.7rem 0.9rem; background: linear-gradient(transparent, rgba(11,31,58,0.88)); color: #fff; font-size: 0.85rem; font-weight: 500; } .gallery-item.wide { grid-column: span 2; aspect-ratio: 16/9; } @media (max-width: 700px) { .gallery-item.wide { grid-column: span 1; aspect-ratio: 4/3; } }

Life at UIS