/* --- Sections ----------------------------------------------------------- */

.section {
  padding: var(--space-16) 0;
}
.section-heading {
  text-align: center;
  color: var(--pink-text);
  margin-bottom: var(--space-2);
}
/* The short teal rule and heart under each heading in the style guide. Drawn in
 * CSS rather than shipped as an image — it is two rectangles and a glyph. */
.section-rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--space-12);
  color: var(--teal);
}
.section-rule::before {
  content: "";
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.section-rule::after {
  content: "♥";
  font-size: 0.75rem;
  line-height: 1;
}

/* --- Wave dividers ------------------------------------------------------ */

/* The soft wave edge on the teal bands. The SVG is inlined as a data URI: one
 * fewer request than a file, and small enough that inlining is cheaper than the
 * round trip. `currentColor` cannot be used inside a data URI, so the fill is
 * written out and the two directions are separate rules. */
.wave {
  display: block;
  width: 100%;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.wave-teal-top {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%232ec4c7' d='M0 48h1440V16c-120 18-260 22-420 10S700 0 560 4 180 30 0 14z'/%3E%3C/svg%3E");
}
.wave-teal-bottom {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%232ec4c7' d='M0 0h1440v32c-120-18-260-22-420-10S700 48 560 44 180 18 0 34z'/%3E%3C/svg%3E");
}