.dclg {
    position: relative;
    background: linear-gradient(180deg, var(--dc-bg) 0%, #fff 100%);
    font-family: var(--dc-font-body);
}

.dclg__inner { max-width: 1280px; margin: 0 auto; }
.dclg__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 160px;
    gap: 14px;
}

.dclg__cell {
    position: relative;
    overflow: hidden;
    border-radius: var(--dc-radius-md);
    margin: 0;
    box-shadow: var(--dc-shadow-sm);
    opacity: 0; transform: translateY(20px);
    animation: dclg-rise 0.8s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(var(--dclg-i, 0) * 70ms);
}

.dclg__cell--sm { grid-column: span 3; grid-row: span 1; }
.dclg__cell--md { grid-column: span 4; grid-row: span 2; }
.dclg__cell--lg { grid-column: span 6; grid-row: span 2; }

.dclg__image {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.9s cubic-bezier(.2,.8,.2,1);
}

.dclg__cell:hover .dclg__image { transform: scale(1.08); }
.dclg__cell:hover .dclg__cap { transform: translateY(0); opacity: 1; }

.dclg__cell::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(11, 31, 51, 0.75) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.dclg__cell:hover::after { opacity: 1; }

.dclg__cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px 18px;
    color: #fff;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 1;
}
.dclg__cap strong { display: block; font-size: 14.5px; font-weight: 600; }
.dclg__cap span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.75); }

@keyframes dclg-rise { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
    .dclg__inner { padding: 0 clamp(16px, 4vw, 40px); }
    .dclg__grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 12px;
    }
    /* vaste 160px-rijen vervangen door een nette beeldverhouding */
    .dclg__cell--sm,
    .dclg__cell--md {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 4 / 3;
    }
    .dclg__cell--lg {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 16 / 9;
    }
    /* op touch geen hover — bijschrift altijd tonen */
    .dclg__cell::after { opacity: 1; }
    .dclg__cap { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
    .dclg__grid { grid-template-columns: 1fr; }
    .dclg__cell--sm,
    .dclg__cell--md,
    .dclg__cell--lg {
        grid-column: span 1;
        aspect-ratio: 4 / 3;
    }
}