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

.card--package,
.card--article-small {

    @include grid-content();

    margin-bottom: calc(var(--spacing)*0.75);
    border: 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;
        }
    }

    .type {

        display: inline-flex;
        flex-grow: 0;
        height: calc(var(--h-block)*0.75);
        border-radius: var(--radius-small);
        border: var(--border-medium);
        align-items: center;
        padding: 5px 1ch 0 1ch;
        

        font-size: var(--fs-xsmall);
        text-transform: uppercase;
        font-weight: 500;
        color: var(--color-txt-light);
        margin-bottom: calc(var(--spacing)*0.75);

    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: calc(var(--padding-inner)*2);
        padding-bottom: calc(var(--padding-inner)*2);
        padding-left: calc(var(--padding-inner)*1.5);
        padding-right: calc(var(--padding-inner)*3);
    }

    .title {
        font-weight: 500;
        font-size: var(--fs-normal);
        margin-bottom: 0.25em;
        text-wrap: balance;
        max-width: 42ch;
        text-transform: uppercase;
        line-height: var(--leading-title);
      flex-grow: 2;
        a {
            text-decoration: none;
        }
    }

    .date,
    .details {
        // flex-grow: 2;
        color: var(--color-txt-light);
        font-size: var(--fs-small);
    }

    .details {
        list-style: none;

        li {
            display: inline;
        }

        li:not(:last-of-type)::after {
            content: "|";
            padding-left: 1ch;
            padding-right: 0.5ch;
        }
    }



    .description {
        font-size: var(--fs-small);
        @include clamp(2);
        // margin-bottom: calc(var(--spacing)*0.75);
        margin-top: calc(var(--spacing)*0.25);
        display: none;
    }



    @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;
        }

    }




}