:root {
    --about-switch-transition-time : 180ms;
    --grey-dark-dim                : #2e3030;
}

.navbar-offset {
    height : calc(var(--var-navbar-height) + var(--var-panel-gap) * 2);
}

.about-itp-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : var(--var-panel-gap);

    .about-itp-text {
        background-color : var(--color-blue-light-bright);
        border           : 1px solid var(--color-blue-light);
        border-radius    : var(--var-panel-border-radius);

        .about-itp-title {
            color : var(--color-itp-blue);
        }
    }

    .about-itp-text {
        padding        : 6rem;
        display        : flex;
        flex-direction : column;
        gap            : 2rem;

        .itp-paragraph {
        }
    }

}

@media (max-width : 900px) {
    .about-itp-grid {
        grid-template-columns : 1fr;
    }

    .about-itp-grid .about-itp-text {
        padding : 3rem;
    }
}

.about-panorama-bg {
    margin-top                 : 8rem;

    transition-property        : background-color;
    transition-duration        : var(--about-switch-transition-time);
    transition-timing-function : ease-in-out;
}

.about-panorama-panel {

    max-width      : var(--var-content-width);
    margin-inline  : auto;
    border-radius  : var(--var-panel-border-radius);
    padding-bottom : 4rem;
}

.about-panorama-bg[data-state="manager"] {
    background-color : var(--color-grey-light-bright);

    h1 {
        color : black;
    }
}

.about-panorama-bg[data-state="developer"] {
    background-color : var(--grey-dark-dim);

    h1 {
        color : var(--color-grey-medium);
    }

    .about-panorama-toggle {
        background-color : #202020;

        .about-panorama-button-bg {
            background-color : var(--color-grey-dark);
        }
    }
}

.about-panorama-toggle {
    --slide-time          : 220ms;
    --padding             : 0.5rem;
    --height              : 56px;

    grid-column           : 1 / span 2;
    grid-row              : 1;
    margin-inline         : auto;
    margin-block          : var(--var-panel-padding);
    flex-shrink           : 0;
    position              : relative;
    overflow              : hidden;

    height                : var(--height);
    width                 : min-content;
    border-radius         : calc(var(--height) / 2);
    background-color      : var(--color-grey-light);
    padding-inline        : var(--padding);

    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : calc(var(--padding) * 2);
    align-content         : center;

    transition            : color, background-color var(--about-switch-transition-time) ease-in-out;

    .about-panorama-button-bg {
        --bg-height                : calc(var(--height) - var(--padding) * 2);

        background-color           : white;
        position                   : absolute;
        top                        : var(--padding);
        left                       : var(--padding);

        height                     : var(--bg-height);
        width                      : calc((50% - var(--padding) * 2));
        border-radius              : calc(var(--bg-height) / 2);

        transition-property        : transform, background-color;
        transition-duration        : var(--slide-time);
        transition-timing-function : ease-in-out;

        transform                  : translateX(0);
        will-change                : transform;
    }

    .about-panorama-button {
        position              : relative;

        align-content         : center;
        height                : calc(var(--height) - var(--padding) * 2);
        border-radius         : calc(var(--height) / 2);
        padding-inline        : 2rem;

        font                  : var(--font-button);
        font-feature-settings : var(--font-features);
        color                 : var(--color-grey-dark);
        text-wrap             : nowrap;
        user-select           : none;
        text-align            : center;

        transition            : color var(--about-switch-transition-time) ease-in-out;
    }

    .about-panorama-button:hover {
        cursor : pointer;
    }

    .about-panorama-button:not(.about-panorama-button_selected):hover {
    }

    .about-panorama-button_selected {
        color : black;
    }
}

.about-panorama-bg[data-state="developer"] .about-panorama-button-bg {
    transform : translateX(calc(100% + var(--padding) * 2));
}

.about-panorama-bg[data-state="developer"] .about-panorama-sidebar {
}

.about-panorama-content {
    display : grid;

    .manager, .developer {
        transition-property        : opacity, transform;
        transition-duration        : var(--about-switch-transition-time);
        transition-timing-function : ease-in-out;

        grid-area                  : 1 / 1;

        .about-block {
            display        : flex;
            flex-direction : column;
            gap            : 2rem;

            border         : 1px solid;
            border-radius  : var(--var-panel-border-radius);
            padding        : 4rem;
            margin-block   : var(--var-panel-gap);
        }
    }

    .manager {

        .about-block {
            border-color : var(--color-itp-blue);

            .about-section-title {
                color : var(--color-itp-blue);
            }

            ul {
                display        : flex;
                flex-direction : column;
                gap            : 2rem;
            }

            .list-item {
                list-style-type : none;
                color           : var(--color-grey-black);
                position        : relative;
                padding-left    : 2rem;
                line-height     : 1.6;
            }

            .list-item:before {
                content     : "\2022";
                margin-top  : 0.3rem;
                position    : absolute;
                inset       : 0;
                line-height : inherit;
                color       : var(--color-itp-blue);
                font        : inherit;
                /*align-content : center;*/
                font-size   : 1.6rem;
                width       : min-content;
            }

            p {
                color : var(--color-grey-black);
            }
        }
    }

    .developer {

        .about-block {
            border-color : var(--color-blue-light);

            .about-section-title {
                color       : var(--color-blue-light);
                font        : var(--font-mono);
                font-weight : 600;
                font-size   : 2.8rem;
            }

            h3 {
                color       : var(--color-blue-light-bright);
                font        : var(--font-mono);
                font-weight : 600;
                font-size   : 2.0rem;
            }

            p {
                color       : #b0b4b0;
                font        : var(--font-mono);
                line-height : 1.6;
                font-size   : 1.8rem;
            }
        }
    }
}

.about-panorama-bg[data-state="manager"] .about-panorama-content .developer,
.about-panorama-bg[data-state="developer"] .about-panorama-content .manager {
    opacity        : 0;
    transform      : translateY(16px);
    pointer-events : none;
}

@media (max-width : 600px) {

    .about-panorama-bg {
        .about-panorama-panel {
            .about-panorama-toggle {
                .about-panorama-button {
                    font-size : 1.6rem;
                }
            }
        }
    }
}

.stand-for-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr;
    grid-auto-rows        : min-content;
    column-gap            : var(--var-panel-gap);
}

.stand-for-panel {
    padding-inline : var(--var-panel-padding);
    padding-block  : var(--var-panel-padding);
}

.stand-for-panel {
    padding-inline     : var(--var-panel-padding);
    padding-block      : var(--var-panel-padding);

    display            : grid;
    grid-row           : span 3;
    grid-template-rows : subgrid;
    gap                : 4rem;

    border             : 1px solid var(--color-grey-light);
    border-radius      : var(--var-panel-border-radius);

    /*transition-property        : transform, border-color;*/
    /*transition-timing-function : ease-in-out;*/
    /*transition-duration        : 0.2s;*/
    /*color: var(--color-itp-green-light);*/
}

.stand-for-title {
    color : var(--color-itp-blue);
    /*font: var(--font-h3);*/
}