/* Research area (ET-14755). Figma: Research Area 27654:173407.

   The page is component composition, so the only rule here is the one section whose head the page
   renders itself: the case studies. Whoever renders a head owns the padding under it, and the
   frames draw 96 at 1600 and 48 at 390 around this one.

   The step is at 834, not the homepage's 1200, because that is where these frames' own narrow
   layout begins -- the only place the two disagree about this section. */
.research-area__studies {
    padding-block: var(--space-48);
}

@media (min-width: 834px) {
    .research-area__studies {
        padding-block: var(--space-96);
    }
}

/* The overview panel trades the two body sizes with About Us, which is the other page using this
   shape. Here the left column is a caption over a lead paragraph -- the frame switches the heading
   off (27616:136132) -- so that paragraph is a step up at Body Xl, and the prose beside it is a
   step down at Body Lg (27616:136180). Both are the panel's own hooks, set once here. */
.research-area__overview {
    --list-panel-description-size: var(--type-body-xl-size);
    --list-panel-description-line: var(--type-body-xl-line);
    --list-panel-prose-size: var(--type-body-lg-size);
    --list-panel-prose-line: var(--type-body-lg-line);
}