.cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: var(--light-background-color);

    &:has(.card:hover) .card:not(:hover) {
        filter: grayscale(0.8);
    }

    & .card:hover .card-inner {
        outline: 1px solid lightgrey;

        & .image {
            clip-path: circle(100%);
        }
    }

    .card {
        margin: 2em 0;
        transition: all 0.1s ease-in-out;

        .card-inner {
            overflow: hidden;
            border-radius: 1vw;
            border: 1px solid lightgray;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            height: 100%;
            background-color: var(--light-background-color);
        }

        .image {
            width: 100%;
            padding: 3vmin;
            aspect-ratio: 4/3;
            flex: none;
            clip-path: circle(46%);
            transition: clip-path 0.2s ease-in-out;
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 50%;
        }

        & .content {
            padding: 0 2ch;
            margin-top: 1lh;
            flex: 1 0 max-content;

            &:last-child {
                margin-bottom: 1lh;
            }

            &>* {
                margin-bottom: 1lh;
            }
        }

        & .header {
            font-size: 150%;
            font-weight: bolder;
        }

        & .meta {
            color: grey;
        }

        & .extra {
            color: grey;
            flex: none;
        }

        & .description {
            font-size: 125%;
            max-width: 75ch;
        }

        .icon {
            display: inline-block;
            opacity: 1;
            margin: 0 0.25rem 0 0;
            width: 1.18em;
            height: 1em;
            font-family: Icons;
            font-style: normal;
            font-weight: 400;
            text-decoration: inherit;
            text-align: center;
            backface-visibility: hidden;

            &::before {
                content: "👤";
            }
        }

        .friend-count {
            animation-timeline: --cardRevealTimeline;

            animation-name: friendNumberAnimation;
            animation-fill-mode: both;
            animation-timing-function: cubic-bezier(0, 0, 0.67, 2);
            animation-duration: 1ms;
            animation-range-start: entry 100%;
            animation-range-end: exit 100%;
        }

        .friend-count::before {
            counter-reset: variable var(--variable);
            content: counter(variable);

        }

        .friend-count::after {
            content: ' friends';
        }
    }

    .card {
        flex-basis: calc(100% / 3 - 3%);
        flex-grow: 0;
        flex-shrink: 1;
    }

    .card {
        view-timeline-name: --cardRevealTimeline;
        --card-transform: translateY(24%) rotateZ(-5deg);

        &:nth-child(1) {
            --card-transform: translateY(18%) rotateZ(15deg) scale(1.2);
        }

        &:nth-child(2) {
            --card-transform: translateY(20%) rotateZ(-7deg) scale(1.2);
        }

        &:nth-child(3) {
            --card-transform: translateY(22%) rotateZ(5deg) scale(1.2);
        }

        &:nth-child(4) {
            --card-transform: translateY(24%) rotateZ(-10deg) scale(1.2);
        }

        &:nth-child(5) {
            --card-transform: translateY(17%) rotateZ(15deg) scale(1.2);
        }

        &:nth-child(6) {
            --card-transform: translateY(20%) rotateZ(10deg) scale(1.2);
        }
    }

    .card-inner {
        animation-timeline: --cardRevealTimeline;

        animation-name: cardRevealAnimation;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0, 0, 0.67, 2);
        animation-duration: 1ms;
        animation-range-start: entry 40%;
        animation-range-end: entry 80%;
    }
}

@media screen and (max-width: 1000px) {
    .cards .card {
        flex-basis: calc(100% / 2 - 2%);
    }
}

@media screen and (max-width: 600px) {
    .cards .card {
        flex-basis: calc(100% / 1 - 10%);
    }
}

@keyframes cardRevealAnimation {
    from {
        opacity: 1;
        transform: var(--card-transform);
        box-shadow: 0px 0px 10px 5px rgba(20, 20, 20, 0.4);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotateZ(0deg) scale(1);
        box-shadow: 0px 0px 0px 0px rgba(20, 20, 20, 0);
    }
}

@keyframes friendNumberAnimation {
    0% {
        counter-reset: variable 0;
    }

    5% {
        counter-reset: variable 5;
    }

    10% {
        counter-reset: variable 10;
    }

    15% {
        counter-reset: variable 15;
    }

    20% {
        counter-reset: variable 20;
    }

    25% {
        counter-reset: variable 25;
    }

    30% {
        counter-reset: variable 30;
    }

    35% {
        counter-reset: variable 35;
    }

    40% {
        counter-reset: variable 40;
    }

    45% {
        counter-reset: variable 45;
    }

    50% {
        counter-reset: variable 50;
    }

    55% {
        counter-reset: variable 55;
    }

    60% {
        counter-reset: variable 60;
    }

    65% {
        counter-reset: variable 65;
    }

    70% {
        counter-reset: variable 70;
    }

    75% {
        counter-reset: variable 75;
    }

    80% {
        counter-reset: variable 80;
    }

    85% {
        counter-reset: variable 85;
    }

    90% {
        counter-reset: variable 90;
    }

    95% {
        counter-reset: variable 95;
    }

    100% {
        counter-reset: variable 100;
    }
}