/**/
.steinarten-list {
    --grid-column-count: 5;
    --grid-item--min-width: 7em;
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--gutter));

    display: grid;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--gutter) / 2);

    --grid-item--max-width: calc(
        (100% - var(--total-gap-width)) / var(--grid-column-count)
    );
    grid-template-columns: repeat(
        auto-fill,
        minmax(
            max(var(--grid-item--min-width), var(--grid-item--max-width)),
            1fr
        )
    );
}

.steinarten-list li {
    margin: 0;
    list-style: none;
    user-select: none;
}

.steinarten-list .holder {
    margin: 0;
}

.steinarten-list li:where(:focus-visible, :hover) figcaption {
    opacity: 1;
}

.steinarten-list li img {
    margin-bottom: 1rem;
    inset: 0 0 0 0;
}

.steinarten-list li img {
}

.steinarten-list figcaption {
    position: relative;
    z-index: 1;
    pointer-events: none;
    font-size: var(--font-size-sm);
    font-family: var(--font-alt);
}

@media (min-width: 744px) {
    .steinarten-list {
        gap: var(--gutter);
    }

    .steinarten-list .holder {
        display: grid;
        position: relative;
        place-items: center;
        contain: paint;
        margin: 0;
        padding: 1.5rem;
        aspect-ratio: 1/1;
        inline-size: 100%;
        overflow: hidden;
        overflow: clip;
    }

    .steinarten-list li img {
        position: absolute;
    }

    .steinarten-list figcaption {
        opacity: 0;
        transition: opacity var(--transition);
    }

    .steinarten-list .holder::before {
        position: absolute;
        /*transform: scale(0);*/
        transform-origin: top left;
        opacity: 0;
        z-index: 1;
        backdrop-filter: blur(calc(var(--blur-strength) / 4));
        transition:
            transform var(--transition),
            opacity var(--transition);
        inset: 0 0 0 0;
        border: var(--border-line) var(--color-canvastext);
        background: linear-gradient(
            180deg,
            color-mix(
                    in srgb,
                    var(--color-ocher),
                    transparent var(--bg-transparency)
                )
                0%,
            color-mix(
                    in srgb,
                    var(--color-gold),
                    transparent var(--bg-transparency)
                )
                100%
        );
        content: "";
    }

    .steinarten-list li:where(:focus-visible, :hover) .holder::before {
        transform: scale(1);
        opacity: 1;
    }
}

@media (min-width: 1260px) {
    .steinarten-list figcaption {
        font-size: var(--font-size-md);
    }
}