.card--impact-small {

    border-bottom: var(--border-light);
    &:first-of-type{
        border-top: var(--border-light);
    }

    @include grid-content();
    padding: var(--padding-inner) 0;

    &.has-link {
        @include hover-card-line();
    }

    @include btn--go-to();

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

    .title {
        grid-column: 2;
        font-size: var(--fs-normal);
        font-weight: 500;
        text-transform: uppercase;
        margin-right: 4ch;
    }

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

    .card--open-graph {
        grid-column: 2;
        z-index: 10;
    }

    .keywords {
        grid-column: 2;
        z-index: 10;
        @media #{$x-small} { display: none; }


    }

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

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

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

        }


        .open-graph__details {
            grid-column: 2;
        
             summary,
            .summary-inner{
                display: flex;
                align-items: center;
                cursor: pointer;
                gap: 0.5ch;
            }

            .arrow-details{
                line-height: 0;
                --size:  11px;
                height: var(--size);
                width: var(--size);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                position: relative;
                top: -2px;
            
                svg{
                    transition: transform 0.2s ease-in;
                    width: 100%;
                    fill: var(--color-txt);
                }
                
            }

            summary:hover{
                color: var(--color-txt);
                .arrow-details svg{
                    fill: var(--color-txt);
                } 
            }

            &[open]{
                .arrow-details svg{
                    transform: rotate(90deg);
                } 
            }

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



    
}