<section class="cards cards-1">
  <article class="card">
    <img src='https://images.unsplash.com/photo-1705602688600-d57336f0e4de?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDYxMTc2NDh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
    <div class="card-content">
     <h2>Card 1</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
  </article>
  <article class="card">
    <img src='https://images.unsplash.com/photo-1705602688600-d57336f0e4de?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDYxMTc2NDh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
    <div class="card-content">
     <h2>Card 2</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
  </article>
  <article class="card">
    <img src='https://images.unsplash.com/photo-1705602688600-d57336f0e4de?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDYxMTc2NDh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
    <div class="card-content">
     <h2>Card 3</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
  </article>
</section>

<section class="cards cards-2">
  <article class="card">
    <img src='https://images.unsplash.com/photo-1705602688600-d57336f0e4de?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDYxMTc2NDh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
    <div class="card-content">
     <h2>Card 1</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
  </article>
  <article class="card">
    <img src='https://images.unsplash.com/photo-1705602688600-d57336f0e4de?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDYxMTc2NDh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
    <div class="card-content">
     <h2>Card 2</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
  </article>
  <article class="card">
    <img src='https://images.unsplash.com/photo-1705602688600-d57336f0e4de?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDYxMTc2NDh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
    <div class="card-content">
     <h2>Card 3</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
  </article>
</section>

.cards {
  container-name: cards;
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
}

@container cards (width > 600px) {
  .card {
    flex-direction: row;
    gap: 1.5rem;
  }
  .card img {
    max-inline-size: 30cqi;
  }
}


@layer demo {
  * { box-sizing: border-box; }
  
  .cards {
    align-items: start;
    background-color: rebeccapurple;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    width: 100%;
  }
  
  .card {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 15px 15px rgb(0 0 0 / .25);
    font-size: 1.2rem;
    line-height: 1.35;
    padding: 1.5rem;
    width: 100%;
  }
  
  .card img {
    max-width: 100%;
  }
}