index-main/assets/css/components/_card-folder.scss

.card--folder{
    position: relative;
    max-width: var(--max-w-cards);
    border: var(--border-light);
    padding: var(--padding-inner);
    @include grid-content();
    @include figure-16-9();


    container-type: inline-size;
    container-name: cardfolder;

    .content{
        display: flex;
        flex-direction: column;
    }


    .title{
        flex-grow: 1;
        font-weight: normal;
        font-size: var(--fs-medium);
        margin-bottom: 0.25em;  
         text-wrap: balance;
        max-width: 42ch;
        text-transform: uppercase;
        padding-top: calc(var(--spacing)*0.25);
        a{ text-decoration: none;}
       
         @media #{$small}{
             font-size: var(--fs-normal);
            }

            .icon{
                padding-right: 1ch;
                svg{
                    height: 15px;
                    width: 15px;
                    fill: var(--color-txt);
                }
            }

    }

    .short{
          @include clamp(3);
    }

    ul{
        display: flex;
        list-style: none;
        gap: 1ch;
        color: var(--color-txt-light);
        padding-top: calc(var(--spacing)*0.5);

        li + li{
            &::before{
                content: "|";
                padding-right: 1ch;
            }
        }
        @media #{$small}{
             font-size: var(--fs-small);
        }
    }

    .btn--go-to{
        position: absolute;
        right: calc(var(--padding-inner)*1);
        bottom: var(--padding-inner);
    }

  @include btn--go-to();

    &:hover{
        background-color: var(--grey-950);
        border-color: var(--color-txt); 
    }


 
}



[data-template="investigation-summary"] .card--folder{

    border: none;
    padding-left: 0;
    padding-right: 0;
    border-bottom: var(--border-light);
    &:first-of-type{
        border-top: var(--border-light);
    }
    &.has-link {
        @include hover-card-line();
    }

    figure{
        margin-left: 45px;
        @media #{$x-small}{ margin-left: 0px; }

    }

    .title .icon{
        display: none;
    }

    .icon-folder{
        position: absolute;
        left: 10px;
        padding-top: calc(var(--spacing)*0.5);


        @media #{$x-small}{ display: none; }
        
        svg{
            width: 20px;
            fill: var(--color-txt);
        }
    }


}

   




@container cardfolder (width < 680px) {
    figure{
        aspect-ratio: inherit;
        width: 100%;
        height: 100%;
    }
    .short{
        margin-top: calc(var(--spacing)*0.5);
    }
}

@container cardfolder (width < 520px) {
    figure{
        aspect-ratio: inherit;
        width: 100%;
        height: 100%;
    }
    .short, ul{
        font-size: var(--fs-small);
        
    }
   
}