.card--article-small{

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

    @include figure-16-9();
  
    .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;  
        a{ text-decoration: none;}
        
    }

    time{
        flex-grow: 1;
        color: var(--color-txt-light);
    }
    .keywords{
            margin-top: 1.5em;
            padding-bottom: calc(var(--spacing)*0.25);
            color: var(--color-txt-light);
    }

    &: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{
            margin-top: 0.5em;
            padding-bottom: 0;
        }
    }

    

}