/**
 * mod_webdelta_icon_columns — alleen layout.
 * Kleuren, fonts en witruimte-details komen bewust uit de klant-template.
 * Aanpassen per site kan met de variabelen hieronder, bv.:
 *   .wdic { --wdic-gap: 3rem; --wdic-icon-size: 64px; }
 */

.wdic {
    --wdic-gap: 2rem;
    --wdic-item-gap: 20px;
    --wdic-icon-size: 80px;

    /* Aantal kolommen. De module zet dit op het aantal gevulde kolommen, zodat
       er bij twee ingevulde kolommen geen gat rechts overblijft. */
    --wdic-cols: 3;

    display: grid;
    grid-template-columns: repeat(var(--wdic-cols), 1fr);
    gap: var(--wdic-gap);
}

.wdic__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--wdic-item-gap);

    /* Voorkomt dat een lang woord de kolom breder maakt dan zijn deel. */
    min-width: 0;
}

.wdic__icon {
    width: auto;
    max-width: 100%;
    max-height: var(--wdic-icon-size);
}

/* De gap regelt de ruimte tussen icoon, kop en tekst. Eigen marges van de kop
   en van de <p>'s uit de editor komen daar anders bovenop, dus die halen we
   aan de buitenranden weg. Marges binnen de tekst blijven intact. */
.wdic__title {
    margin: 0;
}

.wdic__text > :first-child {
    margin-top: 0;
}

.wdic__text > :last-child {
    margin-bottom: 0;
}

/* Onder de Bootstrap md-breakpoint onder elkaar. */
@media (max-width: 767.98px) {
    .wdic {
        grid-template-columns: 1fr;
    }
}