.card {
    --rocket-ui-card-image-border-radius: 0 0 3rem 0;

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--rocket-color-grey-200);
    border-radius: var(--rocket-components-border-radius);

    &__placeholder {
        position: relative;
        flex-shrink: 0;
        overflow: hidden;
        border-radius: var(--rocket-ui-card-image-border-radius);
        aspect-ratio: 432 / 244;
    }

    &__image-container {
        @include size(100%);
        @include cover(false);
    }

    &__image {
        @include size(100%);
        @include object-fit;
    }

    &__content {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 1rem;
    }

    &__tags {
        display: flex;
        flex-wrap: wrap;
        padding: 0 0 .75rem;
        column-gap: 1rem;
        row-gap: 1rem;
    }

    &__labels {
        display: grid;
        row-gap: .75rem;
        margin-bottom: .75rem;
    }

    &__link {
        @include line-clamp(3);

        color: var(--rocket-color-grey-700);
        font-weight: 400;
        font-size: 1.25rem;
        font-family: var(--rocket-font-secondary);
        line-height: (28 / 20);
        text-decoration: none;

        span {
            @include transition(background-size);

            background-image: linear-gradient(currentColor,currentColor);
            background-repeat: no-repeat;
            background-position: 0 90%;
            background-size: 0 1px;
        }

        @include event {
            span {
                background-size: 100% 1px;
            }
        }

        &::after {
            @include cover;
        }
    }

    &__text {
        @include line-clamp(3);

        margin-top: 8px;
        font-size: .875rem;
        line-height: (20 / 14);
    }

    &__author {
        color: var(--rocket-color-grey-700);
        font-weight: 500;
        font-size: .875rem;
        line-height: (20 / 14);
    }

    &__date {
        color: var(--rocket-color-grey-500);
        font-size: .75rem;
        line-height: (16 / 12);
    }

    &__footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: auto;
        padding-top: 1rem;
        column-gap: 1rem;
    }
}