.card {
    text-decoration: none;
    color: inherit;
    font-variant: small-caps;
    font-size: 1rem;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: none;

    h3 {
        font-weight: normal;
        text-wrap: balance;
        color: var(--color-card-title);
        font-size: var(--font-size-card-title);
    }

    .card-image {
        background-size: cover;
        background-position: 50% 50%;
        height: 220px;
        display: block;
        border-radius: var(--radius-base) var(--radius-base) 0 0;
        background-image: var(--background-figure);
    }

    .card-content {
        display: flex;
        flex-direction: column;
        padding: var(--padding-card-content);
        gap: var(--gap-card-content);
        flex: 1;
        border-radius: 0 0 var(--radius-base) var(--radius-base);

        h3 {
            flex: 1;
        }

        .card-meta {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }

    &:hover {
        h3 {
            text-decoration: underline;
        }
    }
}