.card {
    display: flex;
    width: 100%;

    position: relative;

    text-decoration: none;

    transition: transform .5s cubic-bezier(.4, 0, .25, 1);
}

.card-categories {
    position: absolute;

    display: flex;
    flex-flow: row nowrap;

    gap: var(--gap-xs);
    
    top: calc(-0.5 * (1rem + 2 * var(--gap-2xs)));
    left: calc(var(--gap-m) + var(--gap-2xs));
    z-index: 2;

    list-style-type: none;

    transition: transform .5s cubic-bezier(.4, 0, .25, 1);
}

.card-categories li {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1rem;
    font-weight: 600;
    padding: var(--gap-2xs) var(--gap-xs);

    border-radius: calc(1rem + 2 * var(--gap-2xs));

    /* Frosted glass background */
    background-color: var(--frosted-glass-background);
    background-blend-mode: var(--frosted-glass-blendmode);
    backdrop-filter: var(--frosted-glass-blur);
    -webkit-backdrop-filter: var(--frosted-glass-blur);
    border: var(--frosted-glass-border);
    box-shadow: var(--shadow-elevation-low);

    transition: box-shadow .5s cubic-bezier(.4, 0, .25, 1);
}

.card-categories li svg {
    height: 1.5em;
    width: 1.5em;
    margin: -.25em;
}

.card-content {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border: var(--frosted-glass-border);
    border-radius: var(--gap-m);
    background-color: var(--c-background-lighter);
    box-shadow: var(--shadow-elevation-medium);

    transition: box-shadow .5s cubic-bezier(.4, 0, .25, 1), background-color .5s cubic-bezier(.4, 0, .25, 1);
}

.card:hover,
.card:focus {
    transform: scale(1.02);


    .card-categories {
        transform: scale(1.02);

        li {
            box-shadow: var(--shadow-elevation-medium);
        }
    }


    .card-content {
        background-color: var(--c-background-lightest);
        box-shadow: var(--shadow-elevation-high);
    }
}

.card:focus {
    outline: none;

    .card-content{
        outline: 2px solid var(--c-highlight);
        outline-offset: 2px;
    }
}

.cover-image {
    flex: 1;
    width: 100%;

    transition: filter .5s cubic-bezier(.4, 0, .25, 1);
}

.card-info {
    flex-shrink: 0;
    padding: var(--gap-s) var(--gap-m);

    h3 {
        font-size: 2rem;
        line-height: 1;
        margin-bottom: 0;

        padding: .1em 0;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    h4 {
        line-height: 1;
        margin-bottom: 0;
        opacity: .5;
    }

    p {
        margin-bottom: 0;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }
}

.card.square {
    flex-flow: column nowrap;
}