<aside role="note">
  <p>Your browser doesn't natively support container queries, but the demo works thanks to the polyfill! Refer to the JS tab for how to include it.</p>
</aside>

<ul role="list" class="flexbox-grid card-list container resize">
  <li>
    <div class="card">
      <img src="https://assets.codepen.io/1101822/jellyfish.jpg" alt="Pink and purple small flourescent jellyfish with white spotted caps float in inky darkness." width="400" height="300">
      <div class="card__content">
        <h3>Dolor sit amet</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <img src="https://assets.codepen.io/1101822/jellyfish.jpg" alt="Pink and purple small flourescent jellyfish with white spotted caps float in inky darkness." width="400" height="300">
      <div class="card__content">
        <h3>Dolor sit amet</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <img src="https://assets.codepen.io/1101822/jellyfish.jpg" alt="Pink and purple small flourescent jellyfish with white spotted caps float in inky darkness." width="400" height="300">
      <div class="card__content">
        <h3>Dolor sit amet</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </li>
</ul>

.card {
  --img-ratio: 2/1;

  display: grid;
  gap: 1rem;
  padding: 1rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.35);
  border-radius: 0.5rem;
}

.card > img {
  height: max(18vh, 12rem);
  object-fit: cover;
  width: 100%;
}

@supports (aspect-ratio: 1) {
  .card > img {
    aspect-ratio: var(--img-ratio);
    height: auto;
  }
}

.card__content > :not(h2, h3, h4) {
  font-size: 0.9rem;
}

.card__content {
  display: grid;
  gap: 0.5rem;
  gap: 1cqb;
}

.card-list {
  align-items: start;
}

.card-list li {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card {
    --img-ratio: 1;
    grid-auto-flow: column;
    align-items: center;
  }
}

@container (min-width: 600px) {
  .card {
    --img-ratio: 2/1;
    grid-template-areas: "card";
    place-items: center;
    padding: 0;
    overflow: hidden;
  }

  .card > * {
    grid-area: card;
  }

  .card__content {
    text-align: center;
    color: #fff;
    padding: 1rem;
  }

  .card__content {
    font-size: 2rem;
  }
}

// Support Test
const supportsContainerQueries = "container" in document.documentElement.style;

// Conditional Import
if (!supportsContainerQueries) {
  import("https://cdn.skypack.dev/container-query-polyfill");
}