xxxxxxxxxx
<!-- The CSS -->
<style>
/*
You can create a containment context on the container <div>
using the container-type property:
*/
.container {
container-type: inline-size;
}
/*
Once a containment context is created, you can use
the @container at-rule to write a container query.
The query in the following example will apply styles
to elements based on the size of the nearest ancestor
with a containment context. Specifically, this query
will apply a larger font size for the card title if
the container is wider than 700px:
/* Default heading styles for the card title */
.card h2 {
font-size: 1em;
}
/* Container query applied if the container is larger than 700px */
@container (min-width: 700px) {
.card h2 {
font-size: 2em;
}
}
/*
If other areas of the page are also containment contexts,
you can use the same component in those areas and it will
respond to the relevant containment context. This makes
reusable components a lot more flexible without needing to
know specifically where they will be used each time.
*/
</style>
<!-- The HTML -->
<div class="container">
<div class="card">
<img src="image.png" alt="Cat with two different color eyes" />
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>