index-main/assets/css/components/_card-article-small.scss

.card--article-small {

    @include grid-content();

    padding-top: calc(var(--spacing)*0.5);
    padding-bottom: calc(var(--spacing)*0.5);

    border-bottom: var(--border-light);

    &:first-of-type {
        border-top: var(--border-light);
    }

    &.has-link {
        @include hover-card-line();
    }

    @include figure-16-9();

    figure {
        @media #{$x-small} {
            margin-left: 0px;
        }
    }


    .content {
        display: flex;
        flex-direction: column;
        padding-top: calc(var(--spacing)*0.25);
        padding-right: calc(var(--padding-inner)*3);
    }

    .title {
        font-weight: 500;
        font-size: var(--fs-small);
        margin-bottom: 0.25em;
        text-wrap: balance;
        max-width: 42ch;
        text-transform: uppercase;
        line-height: var(--leading-title);

        a {
            text-decoration: none;
        }

    }

    time {
        flex-grow: 1;
        color: var(--color-txt-light);
    }

    .description {
        @include clamp(2);
        margin-bottom: calc(var(--spacing)*0.75);
        margin-top: calc(var(--spacing)*0.25);
    }



    @include btn--go-to();
    @include hover-card-line();

    .keywords {
        display: none;
    }

    @media #{$medium} {
        .title {
            font-size: var(--fs-normal);
            margin-bottom: 0;
        }
    }

    @media #{$x-small} {

        .content {
            display: contents;
        }

        .title {
            font-size: var(--fs-small);
            padding-top: calc(var(--spacing)*0.25);
        }

        figure {
            grid-row: 1/3;
        }

        .description {
            grid-column: span 2;
        }

    }




}