Container Query Units

Opgavebeskrivelse

Brug container query units til at gøre font-størrelsen på card-heading responsiv i forhold til størrelsen på card’et.

<main>
  <div class="card-wrapper">
    <div class="card">
      <img src="https://api.iconify.design/streamline-freehand:picture-double-landscape.svg?color=%23888888" alt="Product image">
      <div class="content">
        ...
      </div>
    </div>
  </div><div class="card-wrapper">
    <div class="card">
      <img src="https://api.iconify.design/streamline-freehand:picture-double-landscape.svg?color=%23888888" alt="Product image">
      <div class="content">
        ...
      </div>
    </div>
  </div><div class="card-wrapper">
    <div class="card">
      <img src="https://api.iconify.design/streamline-freehand:picture-double-landscape.svg?color=%23888888" alt="Product image">
      <div class="content">
        ...
      </div>
    </div>
  </div>
</main>

Preview

Card heading

Lorem ipsum dolor sit amet.

Card heading

Lorem ipsum dolor.

Card heading

Lorem ipsum dolor.