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();
    }


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

    @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: 400;
        font-size: var(--fs-small);
        margin-bottom: 0.25em;  
        text-wrap: balance;
        max-width: 42ch;
        text-transform: uppercase;
        line-height: 1.1;
        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}{

        // figure{
        //     aspect-ratio: inherit;
        //     width: 100%;
        //     height: 100%;
        // }

        .icon-article{ display: none; }
        .description{ 
            display: none;
        }
        .content{
            padding: 0;
        }
        .title{
            margin-bottom: 0;
        }
        time{
            font-size: var(--fs-small);
            margin-top: 0.25em;
        }

        .keywords {
            display: block;
            line-height: 1.1;
            margin-top: calc(var(--spacing)*0.5);
            padding-right: calc(var(--padding-inner)*1);
            li, a{
                display: inline;
                border: none; 
                padding: 0px;
                color: var(--color-txt-light);
            }
            
        }
       
    }

 
    

}