.masonry {
column-count: 4;
column-gap: 15px;
padding: 20px;
}
.masonry img {
width: 100%;
margin-bottom: 15px;
border-radius: 12px;
cursor: pointer;
transition:
transform 0.3s ease,
opacity 0.3s ease;
break-inside: avoid;
}
.masonry img:hover {
transform: scale(1.03);
opacity: 0.9;
}
.masonry img:focus-visible {
outline: 3px solid #ff7a1a;
outline-offset: 3px;
} @media (max-width: 1200px) {
.masonry {
column-count: 3;
}
}
@media (max-width: 768px) {
.masonry {
column-count: 2;
}
}
@media (max-width: 480px) {
.masonry {
column-count: 1;
}
} .lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
touch-action: none;
overscroll-behavior: contain;
}
.lightbox-open {
overflow: hidden;
}
.lightbox-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 90%;
max-height: 90%;
user-select: none;
}
.lightbox-image {
max-width: 100%;
max-height: 90vh;
border-radius: 12px;
transition: transform 0.18s ease;
user-select: none;
-webkit-user-drag: none;
}
.lightbox-image.is-dragging {
transition: none;
}
.lightbox-counter {
position: absolute;
left: 50%;
bottom: -42px;
transform: translateX(-50%);
padding: 7px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1;
backdrop-filter: blur(8px);
}
.lightbox-close {
position: absolute;
top: 18px;
right: 22px;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: #fff;
cursor: pointer;
font-size: 32px;
line-height: 1;
z-index: 2;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
background: rgba(255, 255, 255, 0.28);
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
background: none;
border: none;
color: white;
cursor: pointer;
padding: 20px;
user-select: none;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
.prev:hover,
.next:hover {
opacity: 0.7;
}
@media (max-width: 768px) {
.lightbox {
background: rgba(0, 0, 0, 0.94);
}
.lightbox-stage {
max-width: 100%;
max-height: 100%;
padding: 0 12px;
}
.lightbox-image {
max-width: 100%;
max-height: 82vh;
border-radius: 10px;
}
.prev,
.next {
display: none;
}
.lightbox-close {
top: 12px;
right: 12px;
width: 40px;
height: 40px;
font-size: 28px;
}
.lightbox-counter {
bottom: -38px;
font-size: 12px;
}
}