.wb-portfolio {
display: grid;
grid-template-columns: repeat(var(--wb-portfolio-cols, 3), 1fr);
gap: 0.75rem;
}
@media (max-width: 700px) {
.wb-portfolio { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
.wb-portfolio { grid-template-columns: 1fr; }
}
.wb-portfolio-item {
display: block;
overflow: hidden;
border-radius: 8px;
line-height: 0;
}
.wb-portfolio-item picture,
.wb-portfolio-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 1 / 1;
}
a.wb-portfolio-item {
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.wb-portfolio-item:hover,
a.wb-portfolio-item:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
a.wb-portfolio-item:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}