.about-main {
    background: var(--bg-overlay), var(--chip-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    > .about-main-container {
        padding: var(--space-sections-m) 0 var(--space-sections-s);

        > :is(h1, p) {
            color: rgb(var(--color-white));
            white-space: pre-wrap;
        }

        > h1 {
            font-size: var(--font-size-l);
            font-weight: var(--font-weight-regular);
            margin-bottom: var(--space-8);
            line-height: var(--line-height-xl);
            animation: slide-up 1s forwards;
        }

        > p {
            font-size: var(--font-size-m);
            font-weight: var(--font-weight-thin);
            line-height: var(--line-height-m);
            animation: slide-up 1s forwards;
        }

        > p + p {
            margin-top: var(--space-4);
        }

        > p.hero-crosslink {
            margin-top: var(--space-10);
            font-size: var(--font-size-s);
            font-style: italic;
            opacity: var(--opacity-600);
            text-align: right;

            > a {
                color: inherit;
                font-style: inherit;
                font-weight: var(--font-weight-bold);

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

#ai-hero > .about-main-container,
#ai-dev-hero > .about-main-container {
    padding-bottom: var(--space-sections-xs);
}

@media (max-width: 820px) {
    .about-main {
        .about-main-container {
            padding: var(--space-sections-m) var(--space-4) var(--space-sections-s);
        }
    }
}