#landingpage {
    max-width: 1910px;
    width: 100%;
    @media (min-height: 800px) {
        overflow-y: scroll !important;
        max-height: calc(100vh - 20px); 
    }
    scrollbar-color: var(--jl-bg-dark) var(--jl-border);
    scrollbar-width: thin;
    /* height: calc(100vh - 120px);  */
    font-size: var(--jl-font-l);  
    color: var(--jl-text);

    margin-top: var(--jl-padding-xxs);;
    margin-bottom: var(--jl-padding-xxs);    
    padding-bottom: 400px;
    


    & .landingpage-legal {
        padding-left: var(--jl-padding-l);
        & h5 {
            color: var(--jl-text-placeholder) !important;
            text-transform: uppercase;
        }
        & p {
            padding-top: 0px !important;
            margin-top: 0px !important;
            text-transform: uppercase;
            width: 1000px;
            font-size: var(--jl-font-xxs);
            color: var(--jl-text-placeholder);
        }
    }

    & .landingpage-content {
        width: 1250px;
        display: grid;
        grid-template-columns: 500px 500px;
        gap: var(--jl-padding-s) var(--jl-padding-m);

       
        & .section {
            display: grid;
            
            padding: var(--jl-padding-l);
            background-color: var(--jl-bg-light);
            border-radius: var(--jl-border-radius);
            border: var(--jl-border-card);
            

            & .title-row {
                display: flex;
                pointer-events: none;

                & .icon {
                    width: 50px;
                    height: 50px;
                }
                & .icon-margin {
                    padding-top: 4px;
                }

                & .title {
                    font-size: 20px;
                    font-weight: bold;
                    margin-top: 1px;
                    color: var(--jl-text-title);
                }
                & .title2 {
                    margin-left: auto;
                    width: 100px;

                    & .number {
                       font-size: 20px;
                       display: block;
                       text-align: right;
                       font-weight: bold;

                    }

                    & .positive {
                        color: var(--jl-positive);
                    }
                    & .negative {
                        color: var(--jl-negative);
                    }
                    & .number-info {
                        display: block;
                        font-size: var(--jl-font-xs);
                        color: var(--jl-text-placeholder);
                        text-align: right;
                    }
                }

            }
            & .description {
                margin-top: 4px;
                font-size: var(--jl-font-xs);
                color: var(--jl-text-muted);
                pointer-events: none;
                display: flex;

                & .arrow {
                    margin-left: auto;
                    width: 100px;
                    text-align: right;
                }
            }
        }

        & .section:hover {
            background-color: var(--jl-bg-lighter);
            cursor: pointer;
            box-shadow: 6px 6px var(--jl-bg-light)
        }
        
    }
}