.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

What layout does this create?

.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

What does object-fit: cover do?

.gallery img:hover {
    transform: scale(1.05);
    transition: transform 0.3s;
}

What effect does this create?

@media (max-width: 768px) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .gallery { grid-template-columns: 1fr; }
}

What does this achieve?

.gallery-item {
    position: relative;
}
.caption {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.7);
}

What is this CSS for?