/* style.css */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; line-height: 1.6; color: #333; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

header { background: #f8f8f8; padding: 20px 0; border-bottom: 1px solid #ddd; }
header h1 { display: inline-block; }
nav { float: right; }
nav a { margin-left: 20px; text-decoration: none; color: #333; }

section { padding: 60px 0; border-bottom: 1px solid #eee; }
section h2 { margin-bottom: 20px; }
.content { max-width: 800px; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.gallery-item img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; }

footer { background: #333; color: #fff; padding: 20px 0; text-align: center; }

/* Mobile */
@media (max-width: 768px) {
    nav { float: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    header h1 { display: block; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; }
}