.gallery-wrapper {
max-width: 100%;
margin: 0 auto;
padding: 2rem 1rem;
}

/* Nagłówek sekcji – opcjonalny */
.gallery-title {
font-size: 1.4rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 1.5rem;
color: #ccc;
}

/* GŁÓWNA MAGIA MASONRY */
.gallery-masonry {
column-count: 1;
column-gap: 1.25rem;
}

@media (min-width: 640px) {
.gallery-masonry {
column-count: 2;
}
}

@media (min-width: 1024px) {
.gallery-masonry {
column-count: 3;
}
}

@media (min-width: 1440px) {
.gallery-masonry {
column-count: 4;
}
}

@media (min-width: 1920px) {
.gallery-masonry {
column-count: 6;
}
}

.gallery-item {
display: block;
position: relative;
margin: 0 0 1.25rem;
break-inside: avoid;            /* klucz do masonry w column-count */
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
border-radius: 6px;
overflow: hidden;
background: #1b1b1b;
transform: translateZ(0);       /* lepszy hover */
}

.gallery-item img {
width: 100%;
height: auto;
display: block;
transform-origin: center center;
transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
}

.gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255,255,255,0.15), transparent 55%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}

.gallery-item:hover img {
transform: scale(1.04);
filter: grayscale(12%);
opacity: 0.95;
}

.gallery-item:hover::after {
opacity: 1;
}