.card {
    box-shadow: var(--shadow-card);
    margin: var(--margin-card);
    border-radius: var(--radius-card);
    background: var(--color-card);
    color: var(--color-card-text);
    border: var(--border-card);
    overflow: hidden;  /* So rounded corners can cut through the content */
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}

.card > :is(section, header, footer):not(.card-top) {
    padding: var(--padding-card);
}

.card > figure > figcaption {
    padding: var(--padding-card-figcaption);
}

.card:not(:has(:is(figure, .card-top))) {
    padding-top: var(--padding-card-top);  /* Figures should be flush with the top */
}

figcaption {
    color: var(--color-figcaption-text);
}

.card-outline {
    box-shadow: none;
    border: none;
    border-radius: var(--radius-outlined-card);
    outline: var(--outline-outlined-card);
}

.card-horizontal {
    flex-flow: row nowrap;
}

.card-horizontal > :is(figure, .card-top) {
    height: auto;
    max-width: var(--figure-max-size-horizontal-card);
}

.card-horizontal > :is(figure, .card-top) ~ :is(section, header, footer) {
    /* Beside figure */
    padding-top: var(--padding-card-top);
}

.large-link {
    display: block;
    padding: 0;
    margin: 0;
}