:root {
  --cc-about-radius: 20px;
  --cc-about-media-ar: 1;
}

.cc-about,
.cc-about *,
.cc-about *::before {
  box-sizing: border-box;
}


.cc-about {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--surface-panel-invert);
  border-radius: var(--cc-about-radius);
  overflow: hidden;
  margin-bottom: var(--section-gap);
  width: 100%;
}

.cc-about__body {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.cc-about__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 500px;
}

.cc-about__title {
  color: var(--ink-invert);
  margin: 0;
  overflow-wrap: break-word;
}

.cc-about__copy {
  margin: 0;
  overflow-wrap: break-word;
}

.cc-about__copy > :first-child {
  margin-top: 0;
}

.cc-about__copy > :last-child {
  margin-bottom: 0;
}

/* One clear line between paragraphs, which is the blank line the comp
   draws. calc so it tracks --leading-body rather than being a magic 26px. */
.cc-about__copy p + p {
  margin-top: calc(var(--leading-body, 1.6) * 1em);
}

/* .cc-btn draws the pill and .cc-btn--dark inverts it for this white
   panel, so there is no geometry to restate here. flex-shrink: 0 stops the
   flex column squeezing the pill shorter than its own padding if the copy
   ever fills the half completely. */
.cc-about__cta {
  flex: 0 0 auto;
}

.cc-about__media {
  flex: 1 1 50%;
  min-width: 0;
  position: relative;
  align-self: stretch;
}

.cc-about__media::before {
  content: "";
  display: block;
  aspect-ratio: var(--cc-about-media-ar);
}

.cc-about__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 10px;
  border-radius: var(--radius4);
}

/* Responsive ----------------------------------------------------------- */

/* There is no mobile comp for this section, so: below 768 the halves stack
   copy-then-photo (reading order matches the DOM, no reordering), the 60px
   inset drops to 30 - 60px of padding on a 375px screen leaves very little
   for a 40px heading - and the photo goes landscape, because a 690x801
   portrait below the copy pushes the rest of the page a long way down.

   space-between has nothing to distribute once the column height is auto,
   so the 30px --space-xs gap becomes the real spacing between the text
   stack and the pill here. */
@media (max-width: 767px) {
  .cc-about {
    flex-direction: column;
  }

  .cc-about__body {
    padding: var(--space-xs);
  }

  .cc-about__media::before {
    aspect-ratio: 4 / 3;
  }
}