:root {
            --primary: #000;
            --accent: #0085b6;
            --white: #fff;
            --font-stack: 'Helvetica Neue', Arial, sans-serif;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: var(--font-stack); color: var(--primary); line-height: 1.6; }
        a { text-decoration: none; color: inherit; }

        header { padding: 40px 20px; text-align: center; }
        .logo-text { font-size: 2rem; letter-spacing: 5px; font-weight: 300; margin-bottom: 20px; }

        nav { margin-bottom: 40px; }
        nav ul { list-style: none; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
        nav a { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; }

        .hero-section { width: 100%; height: 500px; background: #eee; position: relative; overflow: hidden; }
        .hero-image { width: 100%; height: 100%; object-fit: cover; }

        .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; padding: 20px; }
        .thumb-item { width: 100%; aspect-ratio: 1/1; background: #f4f4f4; overflow: hidden; }
        .thumb-item img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
        .thumb-item img:hover { opacity: 0.8; }

        footer { padding: 40px; text-align: center; font-size: 0.8rem; border-top: 1px solid #eee; margin-top: 40px; }

        @media (min-width: 768px) {
            .gallery { grid-template-columns: repeat(3, 1fr); padding: 40px; }
        }
        @media (min-width: 1024px) {
            .gallery { grid-template-columns: repeat(4, 1fr); }
        }