/* Container */
.dw-project-gallery {
    width: 100%;
}

/* Grid basis – 12 kolommen voor fijnmazige control */
.dw-project-gallery .dw-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 20px);
    margin: 0;
    padding: 0;
}

/* Items reset */
.dw-project-gallery .dw-item {
    margin: 0;
}

.dw-project-gallery .dw-item figure {
    margin: 0;
    height: 100%;
}

.dw-project-gallery .dw-item-img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 14px;
    cursor: zoom-in;
    object-fit: cover;
}

.dw-project-gallery .dw-caption {
    font-size: 0.9rem;
    opacity: 0.75;
    margin-top: 6px;
}

/* Patroon:
   - full: 12/12
   - lg-left: 8 kolommen links uitgelijnd
   - sm-right: 4 kolommen rechts, hoort visueel naast lg-left
   - sm-left: 4 kolommen links, hoort visueel naast lg-right
   - lg-right: 8 kolommen rechts uitgelijnd
*/
.dw-project-gallery .dw-item.full     { grid-column: 1 / span 12; }
.dw-project-gallery .dw-item.lg-left  { grid-column: 1 / span 8; }
.dw-project-gallery .dw-item.sm-right { grid-column: 9 / span 4; }

.dw-project-gallery .dw-item.sm-left  { grid-column: 1 / span 4; }
.dw-project-gallery .dw-item.lg-right { grid-column: 5 / span 8; }

/* Responsiveness */
@media (max-width: 1100px) {
    .dw-project-gallery .dw-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .dw-project-gallery .dw-item.full     { grid-column: 1 / span 8; }
    .dw-project-gallery .dw-item.lg-left  { grid-column: 1 / span 5; }
    .dw-project-gallery .dw-item.sm-right { grid-column: 6 / span 3; }
    .dw-project-gallery .dw-item.sm-left  { grid-column: 1 / span 3; }
    .dw-project-gallery .dw-item.lg-right { grid-column: 4 / span 5; }
}

@media (max-width: 760px) {
    .dw-project-gallery .dw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dw-project-gallery .dw-item.full,
    .dw-project-gallery .dw-item.lg-left,
    .dw-project-gallery .dw-item.sm-right,
    .dw-project-gallery .dw-item.sm-left,
    .dw-project-gallery .dw-item.lg-right { grid-column: 1 / span 4; }
}