body { font-family: Arial, sans-serif; text-align: center }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 20px; max-width: 1200px; margin: auto; }
.image-container { position: relative; cursor: pointer; overflow: hidden; width: 98%; height: 300px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s; background-color: white; }
.image-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.image-container:hover { transform: scale(1.05); }
.fullscreen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(29, 29, 29, 0.8); justify-content: center; align-items: center; }
.fullscreen img { max-width: 90%; max-height: 90vh; border-radius: 10px; }
.close-btn { position: absolute; top: 20px; right: 20px; color: white; font-size: 30px; cursor: pointer; }
@media (max-width: 768px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery { grid-template-columns: repeat(1, 1fr); } }