Wrappers

Opgavebeskrivelse

Tilføj container: main / inline-size; til main i CSS.
Tilføj navnet card til din nuværende @container.
Tilføj en ny container query, som lytter til main’s container-bredde. Når den er mindre end 250px, så skal <img> have display: none;.

<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

Heading

Lorem ipsum dolor sit amet consectetur.

Heading

Lorem ipsum dolor sit amet.

Heading

Lorem ipsum dolor sit.