/* Real grid areas reserve space for the copy and the whole illustration. */
.split-grid > .split-block {
  display:grid;
  grid-template-columns:minmax(0,var(--round-split-copy-width,55%)) minmax(0,1fr);
  grid-template-areas:"eyebrow eyebrow" "heading heading" "copy image";
  grid-template-rows:auto auto 1fr;
  gap:16px 24px;
  align-content:start;
  align-items:start;
  padding-bottom:28px;
  min-height:0;
}
.split-grid .split-block > .eyebrow { grid-area:eyebrow; margin:0; }
.split-grid .split-block > .h2 { grid-area:heading; max-width:100%; margin:0; }
.split-grid .split-block > .desc { grid-area:copy; min-width:0; max-width:100%; margin:0; white-space:pre-line; overflow-wrap:anywhere; }
.split-block > .split-figure {
  grid-area:image;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin:0;
  min-width:0;
  min-height:0;
  width:100%;
}
.split-grid .split-block .split-avatar {
  position:relative !important;
  inset:auto !important;
  width:var(--round-media-width,100%) !important;
  max-width:100%;
  height:auto !important;
  margin:0 auto;
  flex:none;
}
.split-grid .split-block .orbit-pill {
  position:relative !important;
  inset:auto !important;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  flex:none;
}
.split-grid > .split-block[data-round-split-layout="left"] {
  grid-template-columns:minmax(0,1fr) minmax(0,var(--round-split-copy-width,55%));
  grid-template-areas:"eyebrow eyebrow" "heading heading" "image copy";
}
.split-grid > .split-block[data-round-split-layout="below"] {
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"eyebrow" "heading" "copy" "image";
  grid-template-rows:auto;
}
.split-block[data-round-split-layout="below"] > .split-figure { max-width:420px; margin:0 auto; }

/* Put the badges under the copy so they don't add two rows below the photo. */
@media(min-width:641px) {
  .split-grid > .split-block:has(> .split-figure:not([data-round-scene="image"])):not([data-round-split-layout="below"]) {
    grid-template-areas:"eyebrow eyebrow" "heading heading" "copy image" ". image" ". image";
    grid-template-rows:auto auto auto auto auto;
    row-gap:12px;
    padding-top:36px;
    padding-bottom:24px;
  }
  .split-grid > .split-block[data-round-split-layout="left"]:has(> .split-figure:not([data-round-scene="image"])) {
    grid-template-areas:"eyebrow eyebrow" "heading heading" "image copy" "image ." "image .";
  }
  .split-block:not([data-round-split-layout="below"]) > .split-figure:not([data-round-scene="image"]) { display:contents; }
  .split-block:not([data-round-split-layout="below"]) > .split-figure:not([data-round-scene="image"]) > .split-avatar {
    grid-area:image;
    align-self:center;
  }
  .split-block:not([data-round-split-layout="below"]) > .split-figure:not([data-round-scene="image"]) > .orbit-pill {
    grid-column:1;
    justify-self:start;
    align-self:start;
    width:fit-content;
    margin:0;
  }
  .split-block[data-round-split-layout="left"] > .split-figure:not([data-round-scene="image"]) > .orbit-pill { grid-column:2; }
}

/* Width and spacing stay within the available text area, including mobile. */
[data-round-text-layout] {
  width:var(--round-copy-width,100%) !important;
  max-width:100% !important;
  min-width:0;
  text-align:var(--round-copy-align,left) !important;
  margin-inline:0 auto !important;
  overflow-wrap:anywhere;
}
[data-round-text-layout][style*="--round-copy-top:"] { margin-top:var(--round-copy-top) !important; }
[data-round-text-layout][style*="--round-copy-bottom:"] { margin-bottom:var(--round-copy-bottom) !important; }
[data-round-copy-position="center"] { margin-inline:auto !important; }
[data-round-copy-position="right"] { margin-inline:auto 0 !important; }
[data-round-line-breaks] { white-space:pre-line; }

@media(max-width:640px) {
  .split-grid > .split-block,
  .split-grid > .split-block[data-round-split-layout] {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"eyebrow" "heading" "copy" "image";
    grid-template-rows:auto;
  }
  .split-block > .split-figure { max-width:320px; margin:0 auto; }
  .split-grid .split-block .split-avatar { width:var(--round-media-mobile-width,var(--round-media-width,100%)) !important; }
  [data-round-text-layout] { width:var(--round-copy-mobile-width,100%) !important; }
}