.wbg-gallery {
--wbg-columns: 3;
--wbg-gap: 0.75rem;
--wbg-radius: 30px;
--wbg-accent: #1e3a5f;
--wbg-accent-light: #e8edf3;
--wbg-transition: 0.3s ease;
} .wbg-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 1.25rem;
}
.wbg-filters__btn {
padding: 0.4rem 1.1rem;
border: 2px solid var(--wbg-accent);
border-radius: 20px;
background: transparent;
color: var(--wbg-accent);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background var(--wbg-transition), color var(--wbg-transition);
}
.wbg-filters__btn:hover,
.wbg-filters__btn.is-active {
background: var(--wbg-accent);
color: #fff;
} .wbg-gallery--grid .wbg-grid {
display: grid;
grid-template-columns: repeat( var(--wbg-columns), 1fr );
gap: var(--wbg-gap);
}
.wbg-gallery--grid .wbg-grid__item {
margin: 0;
}
.wbg-gallery--grid .wbg-grid__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
border-radius: var(--wbg-radius);
} .wbg-gallery--masonry .wbg-grid {
column-count: var(--wbg-columns);
column-gap: var(--wbg-gap);
}
.wbg-gallery--masonry .wbg-grid__item {
break-inside: avoid;
margin: 0 0 var(--wbg-gap) 0;
display: inline-block;
width: 100%;
}
.wbg-gallery--masonry .wbg-grid__img {
display: block;
width: 100%;
height: auto;
border-radius: var(--wbg-radius);
} .wbg-gallery--grid .wbg-grid__item--span {
grid-column: span 2;
}
.wbg-gallery--masonry .wbg-grid__item--span {
column-span: all;
} .wbg-grid__item {
position: relative;
overflow: hidden;
border-radius: var(--wbg-radius);
transition: opacity var(--wbg-transition), transform var(--wbg-transition);
}
.wbg-grid__item img {
display: block;
line-height: 0;
}
.wbg-grid__img {
transition: transform 0.4s ease;
}
.wbg-grid__item:hover .wbg-grid__img {
transform: scale(1.03);
} .wbg-grid__item--video {
cursor: pointer;
}
.wbg-grid__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
transition: opacity 0.2s;
}
.wbg-grid__item--video:hover .wbg-grid__play {
opacity: 0.9;
} .wbg-grid__item.wbg-hidden {
display: none;
}
.wbg-grid__item.wbg-fade-out {
opacity: 0;
transform: scale(0.95);
}
.wbg-grid__item.wbg-fade-in {
opacity: 1;
transform: scale(1);
} .wbg-page {
display: none;
}
.wbg-page.is-active {
display: grid;
}
.wbg-gallery--masonry .wbg-page.is-active {
display: block;
} .wbg-paged-wrap {
position: relative;
} .wbg-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
cursor: pointer;
padding: 0;
transition: opacity 0.2s ease, background-color 0.2s ease;
}
.wbg-arrow:hover {
background: #ffffff;
}
.wbg-arrow:focus-visible {
outline: 2px solid var(--wbg-accent);
outline-offset: 2px;
}
.wbg-arrow[disabled] {
opacity: 0;
pointer-events: none;
}
.wbg-arrow--prev {
left: -22px;
}
.wbg-arrow--next {
right: -22px;
}
.wbg-arrow svg {
width: 20px;
height: 20px;
fill: none;
stroke: #1a1a1a;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 600px) {
.wbg-arrow--prev {
left: 8px;
}
.wbg-arrow--next {
right: 8px;
}
.wbg-arrow {
width: 36px;
height: 36px;
}
.wbg-arrow svg {
width: 16px;
height: 16px;
}
} .wbg-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 16px 0 4px;
}
.wbg-dot {
width: 10px;
height: 10px;
border-radius: 5px;
border: none;
padding: 0;
cursor: pointer;
background-color: var(--wbg-dot-inactive);
transition: width 0.3s ease, background-color 0.3s ease;
}
.wbg-dot:focus-visible {
outline: 2px solid var(--wbg-accent);
outline-offset: 2px;
}
.wbg-dot.is-active {
width: 28px;
background-color: var(--wbg-dot-active);
} @media ( max-width: 1024px ) {
.wbg-gallery {
--wbg-columns: 2;
}
}
@media ( max-width: 600px ) {
.wbg-gallery {
--wbg-columns: 2;
}
.wbg-gallery--masonry .wbg-grid {
column-count: 2;
}
.wbg-filters {
gap: 0.35rem;
}
.wbg-filters__btn {
font-size: 0.8rem;
padding: 0.3rem 0.8rem;
}
}
@media ( max-width: 400px ) {
.wbg-gallery {
--wbg-columns: 1;
}
.wbg-gallery--masonry .wbg-grid {
column-count: 1;
}
} .wbg-grid__item--playing {
position: relative;
aspect-ratio: 16 / 9;
}
.wbg-grid__video-iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
border-radius: var(--wbg-radius);
}
.wbg-grid__video-close {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
cursor: pointer;
padding: 0;
transition: background 0.2s ease;
}
.wbg-grid__video-close:hover {
background: rgba(0, 0, 0, 0.85);
}
.wbg-grid__video-close:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}