<div class="controls"></div>
<div class="container">
  <h1>Card Title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam architecto modi commodi, ipsam aut alias voluptas ipsum eos illo nostrum mollitia voluptate magnam repudiandae repellendus dicta eum atque quod sequi.</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde iusto molestiae libero? Perferendis itaque fugiat placeat, veritatis est atque maiores consequuntur sapiente? Natus laboriosam, cum nisi dolor suscipit quisquam consectetur.</p>
  <h2>Subtitle</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quas veritatis ab laborum inventore animi consectetur, totam eligendi dicta repellat cum facere vitae accusantium, harum adipisci. Deleniti ex doloremque aspernatur.</p>
</div>

*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  font-family: Raleway, sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
}

.container {
  inline-size: 50vw;
  margin-inline: auto;
  background: lightblue;
}

h1,
h2,
p {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

h1, h2 {
  background: lightgreen;
}

p {
  background: lightcoral
}