.wd-wrap { container-type: inline-size; }
.wd-gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: calc((100cqw - 88px) / 12 * 1.3); gap: 8px; margin: 1.5rem 0 2rem; }
.wd-item { display: block; overflow: hidden; background: #222; border-radius: 2px; }
.wd-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .2s; }
.wd-item:hover img { transform: scale(1.05); opacity: .9; }
.wd-item.c12 { grid-column: span 12; } .wd-item.c8 { grid-column: span 8; } .wd-item.c4 { grid-column: span 4; } .wd-item.c5 { grid-column: span 5; } .wd-item.c6 { grid-column: span 6; } .wd-item.c7 { grid-column: span 7; } .wd-item.c3 { grid-column: span 3; }
.wd-item.r2 { grid-row: span 2; } .wd-item.r3 { grid-row: span 3; } .wd-item.r4 { grid-row: span 4; } .wd-item.r6 { grid-row: span 6; }
@media (max-width: 640px) {
	.wd-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 38vw; grid-auto-flow: dense; gap: 6px; }
	.wd-item.c12, .wd-item.c8, .wd-item.c7, .wd-item.c6, .wd-item.c5, .wd-item.c4, .wd-item.c3 { grid-column: span 1; grid-row: span 1; }
	.wd-item.c12, .wd-item.c8, .wd-item.c7 { grid-column: span 2; }
	.wd-item.c4.r3 { grid-row: span 2; }
}
#wd-lightbox { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.92); align-items: center; justify-content: center; }
#wd-lightbox.open { display: flex; }
#wd-lightbox img { max-width: 94vw; max-height: 92vh; box-shadow: 0 0 30px rgba(0,0,0,.6); }
#wd-lightbox button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; opacity: .75; line-height: 1; padding: 12px 16px; }
#wd-lightbox button:hover { opacity: 1; }
#wd-lightbox .wd-close { top: 6px; right: 10px; font-size: 40px; }
#wd-lightbox .wd-prev, #wd-lightbox .wd-next { top: 50%; transform: translateY(-50%); font-size: 56px; }
#wd-lightbox .wd-prev { left: 4px; } #wd-lightbox .wd-next { right: 4px; }