Centered Intro

import CenteredIntro from "./index.jsx";
import { centeredIntro } from "../demo-data.js";

export default function CenteredIntroDemo() {
  return <CenteredIntro {...centeredIntro} />;
}

import styles from "./styles.module.css";

export default function CenteredIntro({ heading, body, image }) {
  return (
    <section className={styles.section}>
      {heading && <h2 className={styles.heading}>{heading}</h2>}
      {body && <p className={styles.body}>{body}</p>}
      {image && (
        <div className={styles.imageWrapper}>
          <img
            src={image.src}
            alt={image.alt ?? ""}
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" }}
          />
        </div>
      )}
    </section>
  );
}

.section {
  --color-black: #111;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 4vw;
  gap: 2rem;
  background: #fff;
  color: var(--color-black);
}

.heading {
  order: 1;
  font-size: clamp(2rem, 5vw, 5.5rem);
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

.body {
  order: 2;
  font-size: clamp(0.8rem, 1.3vw, 1.15rem);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.55;
  max-width: 62em;
  margin: 0;
}

.imageWrapper {
  order: 3;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

/* Mobile: image slots between heading and body */
@media (max-width: 768px) {
  .imageWrapper { order: 2; }
  .body { order: 3; }
}