<main>
  <p>Another lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, deleniti saepe! Labore alias nemo quam perferendis harum ducimus at qui omnis magni amet eius, optio dolorum? Aliquid harum molestias voluptatibus.</p>
</main>

@layer base, open-props, demo;
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap");
@import url(https://unpkg.com/open-props/open-props.min.css) layer(open-props);
@import url(https://unpkg.com/open-props/normalize.min.css) layer(open-props);

@layer demo {
  p:first-line {
    font-variant: small-caps;
    font-weight: bold;
    font-size: 1.25rem;
  }
  p:first-letter {
    font-family: "Merriweather", serif;
    initial-letter: 3.5 3;
    -webkit-initial-letter: 3.5 3;
    font-weight: bold;
    line-height: 1;
    margin-right: 1rem;
    color: var(--surface-1);
    background: var(--purple-6);
    padding: 0.5rem;
    border-radius: var(--radius-2);
    box-shadow: var(--size-2) var(--size-2) 0 var(--indigo-8);
  }
}

@layer base {
  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
  }

  main {
    display: grid;
    place-items: center;
    width: 50ch;
    max-width: calc(100vw - (2 * var(--size-4)));
  }
}