.site-header {
    background-color: var(--color-bg);
    border-bottom-color: var(--color-border);
    box-shadow: 0 4px 20px rgba(46, 36, 28, 0.08);
}

.page-header {
    background-color: var(--color-surface);
    text-align: center;
}

.page-header .container {
    padding-top: 140px;
    padding-bottom: var(--space-xl);
}

.about {
    position: relative;
    z-index: 0;
    background-color: var(--color-bg);
}

.about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    z-index: -1;
    background-image: linear-gradient(to bottom, var(--color-surface), var(--color-bg));
}

.about.about-reverse {
    background-color: var(--color-surface);
}

.about.about-reverse::before {
    background-image: linear-gradient(to bottom, var(--color-bg), var(--color-surface));
}

.about-reverse .about-media {
    order: 2;
}

.about-reverse .about-copy {
    order: 1;
}

.about-reverse + .social {
    background-color: var(--color-bg);
}

.about-reverse + .social::before {
    background-image: linear-gradient(to bottom, var(--color-surface), var(--color-bg));
}

@media (max-width: 900px) {
    .page-header .container {
        padding-bottom: var(--space-lg);
    }

    .about-reverse .about-media {
        order: -1;
    }
}