index-main/assets/css/template/_home.scss

.section--home {

    @media #{$small-up} {
        border-bottom: var(--border-light);
    }

    @media #{$medium} {
        padding-bottom: calc(var(--spacing)*4);
        margin-bottom: calc(var(--spacing)*4);
        &:first-of-type{
            padding-top: calc(var(--spacing)*2);
        }
        .col-left{
            margin-bottom: calc(var(--spacing)*3); 
        }
    }

    .baseline-section {
        max-width: 42ch;
        font-size: var(--fs-medium);
        line-height: 1.1;
        margin-bottom: calc(var(--spacing)*1);
    }

    .btn--bold-inline{
        text-transform: none;
        font-weight: 500;
        font-size: var(--fs-small);
        .icon{
            position: relative;
            top: 2px;
        }
        svg{
            width: 13px;
            height: 13px;
        }
    }


    @media #{$medium-up} {

        .section--inner {
            max-width: 1600px;
            margin-inline: auto;
            margin-bottom: calc(var(--spacing)*4);
            padding-top: calc(var(--spacing)*4);
            display: grid;
            --gap: calc(var(--padding-body)*2);
            grid-template-columns: 1fr 2fr;
            grid-gap: var(--gap);
        }


        .col-left {
            align-self: start;
            position: sticky;
            top: calc(var(--header-h) + var(--spacing)*4);

        }

        .col-right {
            width: 100%;
            height: 100%;
        }


    }

    
        @media #{$small} {

            .card--article, 
            .card--impact{
                margin-bottom: calc(var(--spacing)*1);
            }

            .baseline-section{
                font-size: var(--fs-big);
                
            }
        

        }








}




#home__investigations {

     @media #{$small-up} {
        .col-right{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--padding-body);

            .card--article:first-of-type{
                grid-column: span 2;

                display: grid;
                grid-template-columns: 1fr 1fr;

                figure, 
                picture{
                    grid-column: span 2;
                }

                .title{
                    grid-column: span 2;
                    font-size: var(--fs-medium);
                    padding-right: 3ch;
                    margin-bottom: calc(var(--spacing)*1);
                }

                .description{
                    grid-column: 1;
                    grid-row: 3;
                    padding-right: 3ch;
                    display: block;
                    -webkit-line-clamp: unset;
                    -webkit-box-orient: unset;
                    overflow: visible;
                }

                dl{
                    grid-column: 2;
                    grid-row: 3;
                }

                .keywords-wrapper{
                    grid-column: 2;
                    grid-row: 4;
                }
            }

            .see-more{
                grid-column: span 2;
                // margin-top: var(--padding-body);
            }
        }
    
    }

   

}