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



    @include figure-16-9();


    .type {


        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-top: calc(var(--spacing)*-0.5);
        // display: none;
    }



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

 

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

    @media #{$small} {
        row-gap: 0;
        display: block;

        .content{
            padding: calc(var(--spacing)*0.5) var(--padding-inner);
        }

        .type{
             margin-bottom: calc(var(--spacing)*0.75);
        }

         .title{
               margin-bottom:  calc(var(--spacing)*0.25);
         }

         .details,
         .date{
              margin-top:  calc(var(--spacing)*0.5);
         }

         .btn--go-to{
            bottom: calc(var(--padding-inner) * 0.75);

                right: calc(var(--padding-inner)*0.75);
         }

  

        // .content {
        //         align-self: auto;
        //         height: 100%;

        //     padding: 0;
        //      padding-bottom: calc(var(--padding-inner)*0.5);
        //      display: flex;
        //      flex-direction: column;
            
        //      align-content: center;
         
             
        // }

        // .type{
        //     display: none;
        // }

        // .title {
        //     font-size: var(--fs-xsmall);
        //     padding-top: calc(var(--spacing)*0.5);
        //     padding-right: 2ch;
        //     text-wrap: wrap;
        //     flex-grow: 1;
        // }

        // .date{
        //      font-size: var(--fs-xsmall);
        // }

        // figure {
        //      grid-row: 1
        // }

    

    }




}