@lucsoft/webgen/bin/css/cards.webgen.static.css

Collection of lucsofts Components

grid {
    max-width: var(--max-width);
    margin: var(--gap) auto;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
}

card {
    box-shadow: var(--background-card);
    border-radius: var(--border-radius);
    background: var(--background-card);
    backdrop-filter: var(--backdrop-filter);
    color: var(--on-card-text);
    font-family: var(--font);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
}

@media(max-width: 520px) {
    grid {
        grid-template-columns: 1fr;
            grid-auto-rows: unset;
    }
    :root {
        --gap: .8rem;
        --card-min-width: 16rem;
    }
    grid card {
        grid-column: span 1;
    }
}
@media(max-width: 420px) {
    grid {
        grid-template-columns: 1fr;
    }
    :root {
        --gap: .5rem;
        --card-min-width: 14rem;
    }

}