.dwd-category-masonry-wrap {
width: 100%;
padding-left: var(--dwd-side-padding, 0);
padding-right: var(--dwd-side-padding, 0);
--dwd-columns: 3;
--dwd-tablet-columns: 2;
--dwd-mobile-columns: 1;
--dwd-gap: 24px;
--dwd-min-height: 0px;
--dwd-overlay-color: #000000;
--dwd-overlay-opacity: 0.22;
--dwd-text-color: #ffffff;
--dwd-hover-zoom: 1.03;
--dwd-font-size: clamp(1.1rem, 2vw, 2rem);
box-sizing: border-box;
}
.dwd-category-masonry-grid {
column-count: var(--dwd-columns);
column-gap: var(--dwd-gap);
}
.dwd-category-masonry-card {
position: relative;
display: block;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin: 0 0 var(--dwd-gap);
overflow: hidden;
background: #f3f3f3;
text-decoration: none;
line-height: 0;
}
.dwd-category-masonry-image {
display: block;
width: 100%;
height: auto;
min-height: var(--dwd-min-height);
object-fit: cover;
transition: transform 0.35s ease;
}
.dwd-category-masonry-card:hover .dwd-category-masonry-image,
.dwd-category-masonry-card:focus .dwd-category-masonry-image {
transform: scale(var(--dwd-hover-zoom));
}
.dwd-category-masonry-overlay {
position: absolute;
inset: 0;
background: var(--dwd-overlay-color);
opacity: var(--dwd-overlay-opacity);
pointer-events: none;
}
.dwd-category-masonry-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: calc(100% - 2rem);
text-align: center;
color: var(--dwd-text-color);
font-size: var(--dwd-font-size);
font-weight: 700;
line-height: 1.15;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
@media (max-width: 991px) {
.dwd-category-masonry-grid {
column-count: var(--dwd-tablet-columns);
}
}
@media (max-width: 640px) {
.dwd-category-masonry-grid {
column-count: var(--dwd-mobile-columns);
}
}