:root {

--bg1: #EDEBE6;

--bg2: #F0F5F7;

--text: #262626;

--muted: #8E8E8E;

--border: rgba(0,0,0,.06);

--maxw: 55rem;

--padX: 4rem;

--padY: 5rem;

}

- { box-sizing: border-box; }

html { font-size: 17px; }

@media (max-width: 736px){ html { font-size: 16px; } }

@media (max-width: 360px){ html { font-size: 15px; } }

body {

margin: 0;

color: var(--text);

background: linear-gradient(0deg, var(--bg1) 0%, var(--bg2) 100%);

-webkit-font-smoothing: antialiased;

}

a { color: inherit; text-decoration: underline; }

img { display: block; max-width: 100%; height: auto; }

#wrapper {

min-height: 100dvh;

display: grid;

place-items: center;

padding: 4rem 1.25rem;

}

.main {

background: white;

border: 1px solid var(--border);

max-width: 100%;

width: var(--maxw);

padding: var(--padY) var(--padX);

border-radius: 24px;

box-shadow: 0 8px 30px rgba(0,0,0,.04);

}

@media (max-width: 736px){

.main { padding: 4rem 2rem; }

}

.headline {

font-family: ui-sans-serif, system-ui, Inter, Manrope, Arial, sans-serif;

}

.h-intro {

text-transform: uppercase;

letter-spacing: .4rem;

color: #5E5E5E;

font-size: .8rem;

text-align: center;

}

.h-name {

font-size: clamp(2rem, 5vw, 2.625rem);

line-height: 1.2;

letter-spacing: -0.02rem;

text-align: center;

margin: 1rem 0;

}

.h-sub {

color: var(--muted);

font-weight: 300;

line-height: 1.8;

text-align: center;

max-width: 50ch;

margin: 0 auto;

}

.hero {

display: grid;

gap: 1.5rem;

justify-items: center;

margin-bottom: 3rem;

}

.hero-img {

width: min(100%, 20rem);

border-radius: 24px;

border: 1px solid rgba(0,0,0,.1);

padding: .75rem;

background: white;

}

.icons {

display: flex;

gap: 1rem;

justify-content: center;

padding-left: 0;

list-style: none;

}

.icon-btn {

width: 44px; height: 44px;

border: 1px solid rgba(51,51,51,0.14);

border-radius: 50%;

display: grid;

place-items: center;

transition: transform .2s, border-color .2s, opacity .2s;

background: #fff;

}

.icon-btn:hover { transform: translateY(-2px); border-color: rgba(38,38,38,.89); }

.icon-btn img { width: 60%; height: 60%; }

.gallery { margin: 3rem 0; }

.grid {

display: grid;

grid-template-columns: repeat(3, minmax(0, 1fr));

gap: .5rem;

}

@media (max-width: 736px){

.grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

}

.card {

border-radius: 10px;

overflow: hidden;

border: 1px solid rgba(0,0,0,.08);

background: #fff;

cursor: zoom-in;

padding: 0;

display: block;

}

.card img { width: 100%; height: auto; display: block; }

.cta {

display: grid;

place-items: center;

gap: 1rem;

margin: 3rem 0;

}

.btn {

display: inline-flex;

align-items: center;

gap: .5rem;

height: 3rem;

padding: 0 1.5rem;

border-radius: 999px;

text-decoration: none;

text-transform: uppercase;

letter-spacing: .25rem;

background: #262626;

color: white;

border: 1px solid #262626;

transition: transform .15s, opacity .15s, background .15s;

}

.btn:hover { transform: scale(.98); opacity: .95; }

hr {

border: none;

border-top: 1px solid rgba(0,0,0,.08);

margin: 3rem 0;

}

.footer-icons { margin-top: 1rem; }

/ *Lightbox modal* /

.modal {

position: fixed; inset: 0;

background: rgba(0,0,0,.85);

display: none;

align-items: center;

justify-content: center;

padding: 2rem;

z-index: 1000;

}

.[modal.open](http://modal.open) { display: flex; }

.modal img {

max-width: 90vw;

max-height: 85vh;

box-shadow: 0 20px 60px rgba(0,0,0,.5);

}

.modal-close {

position: fixed; top: 1rem; right: 1rem;

width: 44px; height: 44px; border-radius: 50%;

display: grid; place-items: center;

background: rgba(255,255,255,.1); color: #fff;

border: 1px solid rgba(255,255,255,.25);

cursor: pointer;

font-size: 1.25rem;

}

script.js

const modal = document.getElementById('modal');

const modalImg = document.getElementById('modal-img');

const closeBtn = document.getElementById('modal-close');

document.addEventListener('click', (e) => {

const btn = [e.target](http://e.target).closest('.card');

if (!btn) return;

const src = btn.getAttribute('data-full');

modalImg.src = src;

modal.classList.add('open');

});

closeBtn.addEventListener('click', () => modal.classList.remove('open'));

modal.addEventListener('click', (e) => {

if ([e.target](http://e.target) === modal) modal.classList.remove('open');

});

document.addEventListener('keydown', (e) => {

if (e.key === 'Escape') modal.classList.remove('open');

});