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

.card--impact {

    container-type: inline-size;
    container-name: impact;
    border: var(--border-light);
    margin-bottom: calc(var(--spacing)*1);

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


    .card--impact__inner {
        @include grid-content();
        padding: calc(var(--padding-inner)*1.5) var(--padding-inner);



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







        @include btn--go-to();

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



        .content {
            grid-column: 2;
        }

        .card--open-graph {
            grid-row: 1/3;
            grid-column: 2;
            z-index: 10;
        }

        .keywords-wrapper {
            grid-column: 1;
            grid-row: 2/4;
            align-self: end;
            z-index: 10;
        }

        &: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 < 460px) {
    .card--impact__inner{
        display: block!important;
        padding-top: var(--padding-inner)!important;
        padding-bottom: calc(var(--padding-inner)*0.75)!important;
  

    .tag, .date{
        display: inline-flex;
        margin-right: 2ch;
        top: 0px!important;
    }

    .content{
        margin-top: calc(var(--spacing)*0.75);
        margin-bottom: calc(var(--spacing)*0.25);
        padding-right: 0!important;
    }

    .card--open-graph{
        margin-top: calc(var(--spacing)*0.75);
        margin-bottom: calc(var(--spacing)*0.25);
    }

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

    .keywords-wrapper {
        margin-top: calc(var(--spacing)*1);

    }
    .date,
    .content,
    details {
        font-size: 14px !important;
    }

    .btn--go-to {
        top: calc(var(--padding-inner)*1.25)!important;
        bottom: auto;
        right: calc(var(--padding-inner)*1.25)!important;
    }
}
}


@media #{$x-small}{
    .card--impact__inner{
        display: block!important;
        padding-top: var(--padding-inner)!important;
        padding-bottom: calc(var(--padding-inner)*0.75)!important;
    

    .tag, .date{
        display: inline-flex;
        margin-right: 2ch;
        top: 0px!important;
    }

    .content{
        margin-top: calc(var(--spacing)*0.75);
        margin-bottom: calc(var(--spacing)*0.25);
        padding-right: 0!important;
    }

    .card--open-graph{
        margin-top: calc(var(--spacing)*0.75);
        margin-bottom: calc(var(--spacing)*0.25);
    }

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

    .keywords-wrapper {
        margin-top: calc(var(--spacing)*1);

    }
    .date,
    .content,
    details {
        font-size: 14px !important;
    }

    .btn--go-to {
        top: calc(var(--padding-inner)*1.25)!important;
        bottom: auto;
        right: calc(var(--padding-inner)*1.25)!important;
    }
}
}