/*
 * core/gallery laten renderen als de WPBakery image_grid van het faculty-theme,
 * zodat pagina's naar blokken kunnen zonder opmaakverlies.
 *
 * Opgemeten op de live site (WPBakery 4.7.4), per breakpoint:
 *
 *   viewport   container      kolommen  item      inset  rij-pitch
 *   1440       x369 w952      2         447x244   10px   264
 *    768       x77  w614      2         283x158   10px   178
 *    375       x38  w300      1         270x151   10px   171
 *
 * De containerbreedte van het gallery-blok is al gelijk aan die van de oude
 * <ul>, dus alleen de items hoeven geregeld te worden. WPBakery schaalde de
 * afbeelding proportioneel mee met de kolom en begrensde hem op de natuurlijke
 * 437px — vandaar de combinatie flex-basis + max-width.
 *
 * De gap krijgt !important omdat WordPress zijn eigen
 * `gap: var(--wp--style--block-gap, 0.5em)` inline in de <head> zet, ná deze
 * stylesheet en met dezelfde specificiteit.
 */
figure.wp-block-gallery.has-nested-images {
    gap: 20px !important;
    justify-content: flex-start;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 20px;
}

figure.wp-block-gallery.has-nested-images > figure.wp-block-image {
    flex: 0 0 calc(50% - 10px);
    max-width: 447px;
    margin: 0;
    padding: 0;
}

figure.wp-block-gallery.has-nested-images > figure.wp-block-image img {
    width: 100%;
    /* WordPress core zet hier zelf `max-width: 100% !important`, vandaar. */
    max-width: 437px !important;
    height: auto;
    object-fit: unset;
}

/* Onder de tablet-breakpoint viel WPBakery terug op één kolom. */
@media (max-width: 767px) {
    figure.wp-block-gallery.has-nested-images > figure.wp-block-image {
        flex: 0 0 100%;
        max-width: none;
    }

    figure.wp-block-gallery.has-nested-images > figure.wp-block-image img {
        max-width: 100% !important;
    }
}