.about {
    & .wave-top {
        position: absolute;
        top: -2px;
        left: 0;
        pointer-events: none;
    }

    .about-heading {
        padding-inline-start: var(--page-margin-padding);
        max-width: inherit !important;
        border-top: 1px solid var(--light-grey);
    }

    .no-padding-xs {
        @media (--xs-down) {
            padding: 0;
        }
    }

    @media (--md-up) {
        min-height: auto;
        padding: 0;
    }

    & .about-header {
        position: relative;
        display: flex;
        flex-direction: column;

        @media (--lg-up) {
            flex-direction: row;
        }
    }

    & .about-header-text {
        position: relative;
        @media (--lg-up) {
            max-width: 560px;
            width: 100%;

            &:first-child {
                margin-inline-end: 50px;
            }
        }

        @media (--md-down) {
            padding: 0 1rem;
        }

        & h2 {
            font-size: 1.25rem;
            font-family: var(--strong-font-family);

            @media (--sm-down) {
                font-size: 1.25rem;
                line-height: 1.75rem;
            }

            &.header-description {
                font-size: var(--font-size);
                font-family: var(--base-font-family);
                margin-bottom: 2rem;
                margin-top: 1.25rem;
                white-space: pre-line;

                @media (--sm-down) {
                    font-size: var(--font-size);
                    line-height: 1.5rem;
                }
            }
        }

        & p {
            color: var(--near-black);
            white-space: pre-line;
            line-height: 1.5;
        }
    }

    .intro-img {
        position: relative;
        z-index: var(--middle-z-index);
        flex: 1;
        text-align: right;
        margin: 1em auto;

        & .robot {
            max-width: 100%;
        }
    }
}
