<main>
  <h1>Container Queries</h1>
  <div class="container one">
    <div class="background-img">
    </div>
    <div class="child">
    <h2>Heading Is Big</h2>
      Here is a paragraph of text. It is meant to wrap and do other stuff within the container query.
    </div>
  </div>
  <div class="container two">
    <div class="background-img">
    </div>
    <div class="child">
      <h2>Heading Is Big</h2>
      Here is a paragraph of text. It is meant to wrap and do other stuff within the container query.
    </div>
  </div>
</main>

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}
h1 {
  font-size: 3.5em;
  flex: 100%;
  text-align: center;
}
h2 {
  font-size: 2.8em;
}
.container {
  container: card / inline-size;
  border: 2px solid black;
  min-width: 400px;
  min-height: 400px;
}
.container .child {
    padding: 7% 5%;
    font-size: 20px;
}
.background-img {
  background: url('https://images.unsplash.com/photo-1675723200445-f8298e4c6170?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzgxMjE0Njg&ixlib=rb-4.0.3&q=80&w=400') 0 0 no-repeat;
  background-size: cover;
  width: 100%;
  height: 100px;
}
@media only screen and (max-width: 900px) {
  .container {
    min-width: 33%;
    max-width: 33%;
    min-height: 100px;
  }
}
@container (max-width: 200px) {
 .container .child {
   font-size: 18px;
  }
  .container h2 {
    font-size: 1.35em;
  }
  .background-img {
    background: none;
    height: 0;
  }
}