.wb-collection-albums {
display: grid;
grid-template-columns: repeat(var(--wb-collection-cols, 3), 1fr);
gap: 1rem;
}
@media (max-width: 700px) { .wb-collection-albums { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .wb-collection-albums { grid-template-columns: 1fr; } }
.wb-coll-album {
display: block;
text-decoration: none;
color: inherit;
border-radius: 8px;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wb-coll-album:hover,
.wb-coll-album:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.wb-coll-album picture,
.wb-coll-album img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.wb-coll-album-name {
display: block;
padding: 0.5rem 0.25rem;
text-align: center;
font-weight: 600;
line-height: 1.3;
}
.wb-coll-back { margin-bottom: 1rem; }
.wb-coll-back a { text-decoration: none; font-weight: 600; }
.wb-coll-back a:hover { text-decoration: underline; }
.wb-coll-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.wb-coll-filter {
cursor: pointer;
border: 1px solid var(--border-color, #cbd5e1);
background: transparent;
color: inherit;
font: inherit;
padding: 0.35rem 0.85rem;
border-radius: 999px;
transition: background 0.15s ease, color 0.15s ease;
}
.wb-coll-filter:hover { background: var(--bg-hover, rgba(0, 0, 0, 0.05)); }
.wb-coll-filter.is-active {
background: var(--primary, #3b82f6);
color: #fff;
border-color: transparent;
}
.wb-masonry {
column-count: var(--wb-masonry-cols, 3);
column-gap: 0.75rem;
}
@media (max-width: 700px) { .wb-masonry { column-count: 2; } }
@media (max-width: 420px) { .wb-masonry { column-count: 1; } }
.wb-masonry .wb-portfolio-item {
display: block;
width: 100%;
margin: 0 0 0.75rem;
break-inside: avoid;
border-radius: 8px;
overflow: hidden;
line-height: 0;
}
.wb-masonry .wb-portfolio-item img,
.wb-masonry .wb-portfolio-item picture {
display: block;
width: 100%;
height: auto;
aspect-ratio: auto;
object-fit: initial;
}
a.wb-portfolio-item { cursor: pointer; }
.wb-portfolio-item.is-hidden { display: none !important; }