<div class="card-container">
  <div class="card-child">
    <div class="image">
      <img src="https://images.unsplash.com/photo-1518895949257-7621c3c786d7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
    </div>
    <div class="meta">
      <h2>Happy CQ Day!</h2>
      <i>February 14, 2023</i>
      <p>Size container queries and container query units have just landed in stable browsers.</p>
    </div>
  </div>
</div>

.card-container {
  container: card / inline-size;
}

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.card-child h2 {
  font-size: clamp(1.5rem, 7cqi, 4rem);
}

@container (max-width: 400px) {
  .card-child {
    grid-template-columns: 1fr;
  }

  .meta {
    padding: 1rem;
  }

  img {
    aspect-ratio: 16 / 9;
  }
}

@layer base {
  body {
    font-family: system-ui;
    display: grid;
    place-items: center;
    font-size: 18px;
    height: 100vh;
  }

  .card-container {
    background: #ffe4e8;
    overflow: hidden;
    resize: horizontal;
    width: 450px;
    max-width: 700px;
    min-width: 200px;
  }

  .meta {
    padding: 2rem;
  }

  img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: 20% 20%;
  }
}