@responsiveDesktopContent: 1023px;
.page__about {

    @media (max-width: @responsiveDesktop) {
        .no-scroll {
            .main {  height: var(--app-height) }
        }
    }

    .main { justify-content: flex-start }
    
    .breadcrumb { margin-top: @30px }

    .portrait {
        max-width: @260px;
        width: 100%;
        margin: @50px auto @30px auto;
        box-shadow: 0 0 50px rgba(0,0,0,0.33);
        border-radius: 50%;
        transition: all 1s;
        overflow: hidden;

        &:hover { border-radius: 5%; }
    }

    .content {
        &:not(.content--full) {
            .h1 {
                margin-bottom: @30px;
                font-size: @60px;

                @media (max-width: @responsiveDesktopContent) {
                    margin-bottom:calc(@30px / 1.5);
                    font-size: 8.4309vw;
                }
            }
            .h2 {
                margin-bottom: 2em;
                text-align: right;
                font-size: @40px;

                @media (max-width: @responsiveDesktopContent) {
                    font-size: calc(@40px / 1.5);
                }
            }
            .h3 {
                font-size : @30px;

                @media (max-width: @responsiveDesktopContent) {
                    font-size: calc(@30px / 1.5);
                }
            }

            .h3--resume { margin: @60px 0 0 0 }

            .p ~ .p { margin-top: @15px }
        }
    }

    .mozaique {
        &.mozaique--inline {
            position: relative;
            margin-top: @40px;
            padding: @30px 0;
            background: rgba(0,0,0,0.05);
            transition: background 0.5s;

            &:hover {
                background: lighten(@colorBlack, 95%);

                @media (prefers-color-scheme: dark) {
                    background: darken(@colorGreyDark, 3%);
                }
            }
    
            .mozaique__item {
                & ~ .mozaique__item { 
                    border-left: 1px solid lighten(@colorBlack, 80%);

                    @media (prefers-color-scheme: dark) {
                        border-left: 1px solid @colorGreyDark;
                    }
                }
                &:first-child { padding-left: 0 }
                &:last-child { padding-right: 0 }
            }
        }
    }

    .portrait & {
        .mozaique {
            &.mozaique--inline { margin-bottom: @30px }
        }
    }
}