@use "../common/utils" as *;
@use "../common/mixins" as *;

.news-card {
    padding: calc-rem(10px);
    border: calc-rem(1px) solid rgba(var(--color-border));
    border-radius: var(--border-radius);
    height: 100%;
    display: grid;
    grid-template-rows: calc-rem(210px) 1fr;
    position: relative;

    @include media-breakpoint-up(lg) {
        grid-template-rows: calc-rem(250px) 1fr;
    }

    &__thumbnail {
        border-radius: var(--border-radius);
        overflow: hidden;
        height: calc-rem(210px);

        @include media-breakpoint-up(lg) {
            height: calc-rem(250px);
        }

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

    }

    &__content {
        position: relative;
        padding: calc-rem(35px) calc-rem(40px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        time {
            color: rgba(Var(--color-secondary), .6);
            margin-bottom: calc-rem(15px);
            display: inline-block;
            font-variation-settings: var(--font-variation-settings-medium);
        }

        .pill-category {
            position: absolute;
            top: calc-rem(-9px);
            left: calc-rem(25px);

            @include media-breakpoint-up(lg) {
                left: calc-rem(30px);

            }
        }

        .button--arrow{
            margin-top: auto;
        }

        .post-title {
            font-size: clamp-font(14px, 14px);
            text-transform: initial;
            font-variation-settings: var(--font-variation-settings-bold);
            letter-spacing: 0;
            @include truncate(3);
        }
    }

    &__link{
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
    }

}
