:root {
    --cards-grid-columns-min: 1;
    --cards-grid-columns-max: 4;
    --cards-grid-columns-width-min: 225px;
    /* --cards-contributors-columns: 3; */
}
.cards.cards-contributors-cards {
    /* Grid attempt 1 */
    /* display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: row;
    gap: var(--cards-gap); */

    /* Grid attempt 2; see https://stackoverflow.com/a/69154193 */
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(min(100%/1, max(var(--cards-grid-columns-width-min), 100%/4)), 1fr)); /* Does not account for gap */
    grid-template-columns: repeat(auto-fit, minmax(
        min((100% - (var(--cards-gap) * (var(--cards-grid-columns-min) - 1))) / var(--cards-grid-columns-min),
        max(var(--cards-grid-columns-width-min), (100% - (var(--cards-gap) * (var(--cards-grid-columns-max) - 1))) / var(--cards-grid-columns-max))),
        1fr
    )); /* Accounts for gap */
    grid-auto-rows: auto;
    gap: var(--cards-gap);

    /* Flex */
    /* display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--cards-gap);
    align-items: stretch;
    justify-content: start; */
}
.card.card-contributor {
    /* Grid attempt 1 */
    /* grid-row: 1; */

    /* Flex */
    /* width: calc((100% - (var(--cards-gap) * (var(--cards-contributors-columns) - 1))) / var(--cards-contributors-columns)); */
}
.card.card-contributor figure {
    aspect-ratio: 1 / 1;
}
.card-contributor-attribution {
    font-size: 1.25rem;
    color: var(--color-blue-dark);
}

@media only screen and (max-width: 1000px) {
    :root {
        /* --cards-contributors-columns: 2; */
    }
}

@media only screen and (max-width: 800px) {
    :root {
        /* --cards-contributors-columns: 2; */
    }
}

@media only screen and (max-width: 480px) {
    :root {
        /* --cards-contributors-columns: 1; */
    }
}