<div class="paper border">
  <img src="https://picsum.photos/768" alt="Card example image">
</div>

<div class="paper border">
  <img src="https://picsum.photos/768" alt="Card example image">
  <p class="card-body card-text">:has() allows us to create an adaptive layout for our cards based on their children</p>
</div>

@import url("https://unpkg.com/papercss@1.9.2/dist/paper.css") layer(csspaper);

.paper:has(img + p) {
  flex-direction: row;
}


/* Demo style */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  min-height: 100vh;
  background-color: #f6eee3;
  background-size: 20px 20px;
  background-image:  repeating-linear-gradient(0deg, #e5decf, #e5decf 1px, #f6eee3 1px, #f6eee3);
}

.paper {
  display: flex;
  gap: 1rem;
  background-color: #f5f5f5;
  width: 320px;
  max-width: 90vw;
  overflow: hidden;
}

.paper img {
  min-width: 0;
  object-fit: cover;
}