body {
        main {
        grid-area: main;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;

        
    }
}
body {

    display: grid;
    grid-template-rows: var(--header-height) 1fr;
    grid-template-areas: "header" "main" "footer";
    
    height: 100vh;

        header {
        grid-area: header;
        position: sticky;
        top: 0;

        background-color: white;
        border-bottom: 1px solid #cccccc;
        padding: 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;

        #header-name {
            display: flex;
            gap: 0.25rem;
            font-size: 0.875rem;
            #company-name {
                font-weight: 300;
                color: var(--color-gray-01);
                color: var(--color-gray-09)
            }
            #platform-name {
                font-weight: 500;
                color: var(--color-gray-09)
            }
            /* &::after {
                content: "|";
                margin-left: 1rem;
                color: lightgray;
                font-weight: 200;
            } */
        }
        
    }


    main {
        display: grid;
        grid-template-columns: 2fr 3fr;

        #left-section {
            /* background-color: aliceblue; */
            padding: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 3rem;

            div.heading {
                display: flex;
                flex-direction: column;
                gap: 1rem;
                    h1 {
                    font-size: 1.75rem;
                    font-weight: 400;
                    line-height: 1.28572;
                    letter-spacing: 0px;
                
                }
            }
        }
        #right-section {
            background-color: azure;
            background-image: url(/static/assets/magicpattern-87PP9Zd7MNo-unsplash.jpg);
            background-image: url(/static/assets/maxim-klimashin-KuoUqQYiFUk-unsplash.jpg);
            /* background-image: url(/static/assets/milad-fakurian-9waPFLIzs1E-unsplash.jpg); */
            /* background-image: url(/static/assets/slimane-kadi-vcX8tCvQTNs-unsplash.svg); */
            background-size: cover;
        }
    }
    footer {
        background-color: white;
        border-top: 1px solid #cccccc;
        padding: 1rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        #legal {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .footer-links {
                display: flex;
                gap: 1rem;
            }
        }
        
        span, p, a {
            font-size: 0.875rem;
            font-weight: 300;
            letter-spacing: -0.006em;
            line-height: 1.7;
        }

        nav {
            display: flex;
            align-items: center;
            justify-content: end;
        }
    }
}