<div class="cards">
  <article class="card">
    <img src="https://images.unsplash.com/photo-1716647516446-93c62abe3ba2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTc1MTYzNTV8&ixlib=rb-4.0.3&q=80&w=400" alt="Closeup of a bright green houseplant's leaves against a light green background.">
    <div class="card-content">
      <h2>Article Title</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iure harum veniam eius consequatur eum similique.</p>
    </div>
  </article>
  <article class="card">
    <img src="https://images.unsplash.com/photo-1716647516446-93c62abe3ba2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTc1MTYzNTV8&ixlib=rb-4.0.3&q=80&w=400" alt="Closeup of a bright green houseplant's leaves against a light green background.">
    <div class="card-content">
      <h2>Article Title</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iure harum veniam eius consequatur eum similique.</p>
    </div>
  </article>
  <article class="card">
    <img src="https://images.unsplash.com/photo-1716647516446-93c62abe3ba2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTc1MTYzNTV8&ixlib=rb-4.0.3&q=80&w=400" alt="Closeup of a bright green houseplant's leaves against a light green background.">
    <div class="card-content">
      <h2>Article Title</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iure harum veniam eius consequatur eum similique.</p>
    </div>
  </article>
</div>

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

.card img {
  border-start-start-radius: 2cqi;
  border-start-end-radius: 2cqi;
}

@container cards (width >= 70ch) {
  .card {
    display: flex;
  }
  
  .card img {
    border-start-end-radius: 0;
    border-end-start-radius: 2cqi;
    flex: 1 1 30cqi;
  }
}

@layer presentation {
  .cards {
    display: grid;
    gap: 1.5rem;
    font-size: 1.1rem;
    padding: 1.5rem;
  }
  
  .card {
    background-color: hsl(40 75% 90%);
    border-radius: 2cqi;
  }
  
  .card img {
    width: max(250px, 100%);
    object-fit: cover;
  }
  
  .card-content {
    font-family: Merriweather, serif;
    font-size: 1.2em;
    line-height: 1.5;
    padding: 1.5rem;
  }
}

@layer base {
  html {
    font-size: 18px;
  }

  body {
    background-image: 
      radial-gradient(
        50% 50% at center bottom,
        rgb(0 0 0 / 0.66),
        rgb(38 38 38)
    ),
      linear-gradient(
        rgb(255 255 255),
        rgb(38 38 38));
    height: 100vh;
  }
}