.gallery-grid {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:1rem
}

.gallery-thumb {
display:block;
aspect-ratio:1/1;
border:1px solid var(--border);
border-radius:10px;
overflow:hidden;
text-decoration:none;
cursor:zoom-in;
transition:var(--trans)
}

.gallery-thumb:hover,.gallery-thumb:focus-visible {
box-shadow:0 0 16px #0f86;
border-color:var(--green)
}

.gallery-thumb img {
display:block;
width:100%;
height:100%;
object-fit:cover
}

@media (max-width: 900px) {
.gallery-grid {
grid-template-columns:repeat(3,1fr)
}
}

@media (max-width: 500px) {
.gallery-grid {
grid-template-columns:repeat(2,1fr);
gap:.6rem
}
}

.lightbox {
display:none;
position:fixed;
inset:0;
z-index:1000;
align-items:center;
justify-content:center;
background:#000000eb;
padding:2rem
}

.lightbox:target {
display:flex
}

.lightbox-inner {
max-width:90vw;
max-height:90vh;
overflow-y:auto;
border:1px solid var(--border);
border-radius:10px;
box-shadow:0 0 24px #0f83;
background:var(--card);
display:flex;
flex-direction:column
}

.lightbox-inner img {
display:block;
max-width:90vw;
max-height:70vh;
width:auto;
height:auto;
margin:0 auto
}

.lightbox-caption {
padding:1rem 1.25rem;
font-size:.85rem;
line-height:1.6;
color:var(--text);
margin:0;
text-align:center
}

.lightbox-caption a {
text-decoration:underline;
text-decoration-color:#0f86;
text-underline-offset:3px;
text-decoration-thickness:1px;
transition:var(--trans)
}

.lightbox-caption a:hover {
text-decoration-color:var(--cyan);
color:var(--cyan)
}

.lightbox-close {
position:fixed;
top:1.25rem;
right:1.5rem;
width:2.75rem;
height:2.75rem;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
line-height:1;
color:var(--green);
text-decoration:none;
border:1px solid var(--border);
border-radius:50%;
background:var(--bg2);
box-shadow:0 0 12px #0f84;
transition:var(--trans);
z-index:1001
}

.lightbox-close:hover {
color:var(--bg);
background:var(--green);
box-shadow:0 0 16px #0f8a
}

.lightbox-arrow {
position:fixed;
top:50%;
transform:translateY(-50%);
width:3rem;
height:3rem;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
line-height:1;
color:var(--green);
text-decoration:none;
border:1px solid var(--border);
border-radius:50%;
background:var(--bg2);
box-shadow:0 0 12px #0f84;
transition:var(--trans);
z-index:1001
}

.lightbox-arrow:hover {
color:var(--bg);
background:var(--green);
box-shadow:0 0 16px #0f8a
}

.lightbox-arrow--prev {
left:1.5rem
}

.lightbox-arrow--next {
right:1.5rem
}

@media (max-width: 640px) {
.lightbox-arrow {
width:2.5rem;
height:2.5rem;
font-size:1.25rem
}

.lightbox-arrow--prev {
left:.5rem
}

.lightbox-arrow--next {
right:.5rem
}

.lightbox-inner img {
max-height:60vh
}
}