.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px clamp(32px, 6vw, 80px);
    align-items: start;
    margin-bottom: 48px;
    padding: clamp(20px, 3vw, 32px) 0 clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--line);
}

.about-intro .prose {
    margin: 20px 0 0;
}

.about-photo {
    margin: 0;
}

.about-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    transform: rotate(1deg);
}

.about-photo figcaption {
    margin-top: 12px;
    color: var(--muted);
    font-size: 15px;
}

.about-highlight {
    --sticky-top: 96px;
    padding: 28px 26px 30px;
    border-radius: var(--radius);
    background: var(--aqua);
    box-shadow: var(--shadow-lift);
    transform: rotate(-1.5deg);
}

.about-highlight::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    width: 96px;
    height: 26px;
    background: var(--yellow);
    transform: translateX(-50%) rotate(3deg);
}

.about-highlight strong {
    display: block;
    font-family: var(--font-hand);
    font-size: clamp(52px, 6vw, 72px);
    line-height: 1;
}

.about-highlight span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
}

.about-copy {
    margin-top: 0;
}

.about-copy .heading-2 {
    margin-bottom: 20px;
}

.about-copy > p:first-of-type::first-letter {
    float: left;
    margin: 6px 10px 0 0;
    color: var(--pine);
    font-family: var(--font-serif);
    font-size: 64px;
    line-height: 0.8;
}

@media (max-width: 960px) {
    .about-intro {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

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

    .about-highlight {
        max-width: 340px;
    }
}