.card--article-small{

    @include grid-content();
    margin-bottom: calc(var(--spacing)*0.5);

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

    &:first-of-type{
        padding-top: calc(var(--spacing)*0.5);
        border-top: var(--border-light);
    }

    @include figure-16-9-hover();
  
    .content{
        display: flex;
        flex-direction: column;
        padding-top: calc(var(--spacing)*0.25);

    }

    .title{
        font-weight: normal;
        font-size: var(--fs-medium);
        margin-bottom: 0.25em;  
         text-wrap: balance;
        max-width: 42ch;
        a{ text-decoration: none;}
        
    }

    time{
        flex-grow: 1;
        color: var(--color-txt-light);
    }
    .keywords--small{
            margin-top: 1.5em;
            padding-bottom: calc(var(--spacing)*0.25);
            color: var(--color-txt-light);
            z-index: 1000;
            max-width: 32ch;
    }

    &:hover{
        .title{ text-decoration: underline;}
    }

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

    @media #{$x-small}{
        .content{
            padding: 0;
        }
        .title{
            margin-bottom: 0;
        }
        time{
            font-size: var(--fs-small);
            margin-top: 0.25em;
        }
        .keywords--small{
              font-size: var(--fs-small);
            margin-top: 0.5em;
            padding-bottom: 0;
        }
    }

 
    

}