.card--impact{
    @include grid-content();
    border-bottom: var(--border-light);
    &:first-of-type{
        border-top: var(--border-light);
    }
    &.has-link{
        @include hover-card-line();
    }
    padding: calc(var(--spacing)*0.5) 0;
    container-type: inline-size;
    container-name: impact;

    @include btn--go-to();
    .btn--go-to{
        top: calc(var(--padding-inner)*1);
        bottom: auto;

    }

   

    .content{
        grid-column: 2;
    }
    &:not([data-impact-type="media"]) .content{
        @media #{$x-small}{  grid-column: span 2; }
    }

    .tag{
      
        width: auto;
        justify-self: start;
        position: relative;
        top: -5px;
      
    }

    &:not([data-impact-type="media"]){
        .content{
            padding-right: calc(var(--padding-inner)*2.5);
        }
       
    }

    


    .investigations{
        z-index: 10;
        grid-column: 2;
        list-style: none;
        font-size: var(--fs-small);
    
        
        a{
            text-decoration: none;
            color: var(--color-txt-light);
            
        }
        .icon{
            position: relative;
            top: 2px;
            svg{
                width: 14px;
                height: 14px;
                fill: var(--color-txt-light);
            }
        }
        li:hover{
            a{
                color: var(--color-txt);
            }
            .icon svg{ fill: var(--color-txt); }
        }

    }

   


      



    .open-graph__details{
        grid-column: 2;
        @include details-summary();
        summary{
            color: var(--color-txt-light);
            .arrow-details svg{ fill: var(--color-txt-light);}
        }
        @media #{$x-small}{
            summary{
                @include grid-content();
                grid-row-gap: 0;
                .summary-inner{
                    grid-column: 2;
                }
            }
            grid-column: 1/3;
        }
    }



      
            .open-graph__inner{
                margin-top: calc(var(--spacing)*0.5);
                // margin-bottom: calc(var(--spacing)*1);
               
                .card--open-graph{
                    margin-bottom: calc(var(--spacing)*0.5);
                }
              
            }
        
}



@container impact (width < 420px) {
    .date, .content, details{
        font-size: 14px!important;
    }
}