<div class="card">
  <h2>Standard card</h2>
  <img src="https://picsum.photos/400?random=1" alt="" />
  <p>Pastry sugar croissant jelly sugar sprinkles. Sprinkles sweet apple lollipop tiramisu sprinkles. Dolor croissant vanilla donut vanilla donut. Sugar lollipop lollipop sugar ipsum orange.</p>
</div>
<div class="card">
  <h2>Card title that's longer than others</h2>
  <img src="https://picsum.photos/400?random=2" alt="" />
  <p>Pastry donut pastry sweet sweet vanilla sweet sugar donut orange. Jelly cream cookie biscuit pastry lollipop sugar jelly candy ipsum. Cookie ipsum sugar lollipop vanilla lollipop tiramisu vanilla sugar ipsum. Dolor orange donut apple apple jelly apple jelly sweet muffin.</p>
</div>
<div class="card">
  <h2>Card with long body</h2>
  <img src="https://picsum.photos/400?random=3" alt="" />
  <p>Dolor cake biscuit sweet jelly biscuit cake dolor sweet tiramisu orange dolor cake marzipan pastry marzipan cookie lollipop apple sweet. Dolor ipsum orange donut cream cream ipsum croissant muffin candy vanilla sweet marzipan muffin sprinkles orange vanilla orange orange orange. Croissant biscuit sweet jelly dolor sprinkles sugar croissant jelly marzipan candy cake cookie croissant pastry croissant marzipan ipsum sprinkles sweet. </p>
</div>

<div class="card">
  <h2>Standard card</h2>
  <img src="https://picsum.photos/400?random=4" alt="" />
  <p>Pastry sugar croissant jelly sugar sprinkles. Sprinkles sweet apple lollipop tiramisu sprinkles. Dolor croissant vanilla donut vanilla donut. Sugar lollipop lollipop sugar ipsum orange.</p>
</div>
<div class="card">
  <h2>Card title that's longer than others</h2>
  <img src="https://picsum.photos/400?random=5" alt="" />
  <p>Pastry donut pastry sweet sweet vanilla sweet sugar donut orange. Jelly cream cookie biscuit pastry lollipop sugar jelly candy ipsum. Cookie ipsum sugar lollipop vanilla lollipop tiramisu vanilla sugar ipsum. Dolor orange donut apple apple jelly apple jelly sweet muffin.</p>
</div>
<div class="card">
  <h2>Card with long body</h2>
  <img src="https://picsum.photos/400?random=6" alt="" />
  <p>Dolor cake biscuit sweet jelly biscuit cake dolor sweet tiramisu orange dolor cake marzipan pastry marzipan cookie lollipop apple sweet. Dolor ipsum orange donut cream cream ipsum croissant muffin candy vanilla sweet marzipan muffin sprinkles orange vanilla orange orange orange. Croissant biscuit sweet jelly dolor sprinkles sugar croissant jelly marzipan candy cake cookie croissant pastry croissant marzipan ipsum sprinkles sweet. </p>
</div>

<div class="card">
  <h2>Standard card</h2>
  <img src="https://picsum.photos/400?random=7" alt="" />
  <p>Pastry sugar croissant jelly sugar sprinkles. Sprinkles sweet apple lollipop tiramisu sprinkles. Dolor croissant vanilla donut vanilla donut. Sugar lollipop lollipop sugar ipsum orange.</p>
</div>
<div class="card">
  <h2>Card title that's longer than others</h2>
  <img src="https://picsum.photos/400?random=8" alt="" />
  <p>Pastry donut pastry sweet sweet vanilla sweet sugar donut orange. Jelly cream cookie biscuit pastry lollipop sugar jelly candy ipsum. Cookie ipsum sugar lollipop vanilla lollipop tiramisu vanilla sugar ipsum. Dolor orange donut apple apple jelly apple jelly sweet muffin.</p>
</div>
<div class="card">
  <h2>Card with long body</h2>
  <img src="https://picsum.photos/400?random=9" alt="" />
  <p>Dolor cake biscuit sweet jelly biscuit cake dolor sweet tiramisu orange dolor cake marzipan pastry marzipan cookie lollipop apple sweet. Dolor ipsum orange donut cream cream ipsum croissant muffin candy vanilla sweet marzipan muffin sprinkles orange vanilla orange orange orange. Croissant biscuit sweet jelly dolor sprinkles sugar croissant jelly marzipan candy cake cookie croissant pastry croissant marzipan ipsum sprinkles sweet. </p>
</div>

<div class="card">
  <h2>Standard card</h2>
  <img src="https://picsum.photos/400?random=10" alt="" />
  <p>Pastry sugar croissant jelly sugar sprinkles. Sprinkles sweet apple lollipop tiramisu sprinkles. Dolor croissant vanilla donut vanilla donut. Sugar lollipop lollipop sugar ipsum orange.</p>
</div>
<div class="card">
  <h2>Card title that's longer than others</h2>
  <img src="https://picsum.photos/400?random=11" alt="" />
  <p>Pastry donut pastry sweet sweet vanilla sweet sugar donut orange. Jelly cream cookie biscuit pastry lollipop sugar jelly candy ipsum. Cookie ipsum sugar lollipop vanilla lollipop tiramisu vanilla sugar ipsum. Dolor orange donut apple apple jelly apple jelly sweet muffin.</p>
</div>
<div class="card">
  <h2>Card with long body</h2>
  <img src="https://picsum.photos/400?random=13" alt="" />
  <p>Dolor cake biscuit sweet jelly biscuit cake dolor sweet tiramisu orange dolor cake marzipan pastry marzipan cookie lollipop apple sweet. Dolor ipsum orange donut cream cream ipsum croissant muffin candy vanilla sweet marzipan muffin sprinkles orange vanilla orange orange orange. Croissant biscuit sweet jelly dolor sprinkles sugar croissant jelly marzipan candy cake cookie croissant pastry croissant marzipan ipsum sprinkles sweet. </p>
</div>

<div class="card">
  <h2>Standard card</h2>
  <img src="https://picsum.photos/400?random=12" alt="" />
  <p>Pastry sugar croissant jelly sugar sprinkles. Sprinkles sweet apple lollipop tiramisu sprinkles. Dolor croissant vanilla donut vanilla donut. Sugar lollipop lollipop sugar ipsum orange.</p>
</div>
<div class="card">
  <h2>Card title that's longer than others</h2>
  <img src="https://picsum.photos/400?random=23" alt="" />
  <p>Pastry donut pastry sweet sweet vanilla sweet sugar donut orange. Jelly cream cookie biscuit pastry lollipop sugar jelly candy ipsum. Cookie ipsum sugar lollipop vanilla lollipop tiramisu vanilla sugar ipsum. Dolor orange donut apple apple jelly apple jelly sweet muffin.</p>
</div>
<div class="card">
  <h2>Card with long body</h2>
  <img src="https://picsum.photos/400?random=43" alt="" />
  <p>Dolor cake biscuit sweet jelly biscuit cake dolor sweet tiramisu orange dolor cake marzipan pastry marzipan cookie lollipop apple sweet. Dolor ipsum orange donut cream cream ipsum croissant muffin candy vanilla sweet marzipan muffin sprinkles orange vanilla orange orange orange. Croissant biscuit sweet jelly dolor sprinkles sugar croissant jelly marzipan candy cake cookie croissant pastry croissant marzipan ipsum sprinkles sweet. </p>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  padding: 2rem;
}

.card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.09), 0 4px 2px rgba(0, 0, 0, 0.09),
    0 8px 4px rgba(0, 0, 0, 0.09), 0 16px 8px rgba(0, 0, 0, 0.09),
    0 32px 16px rgba(0, 0, 0, 0.09);
}
.card h2 {
  padding: 1rem 1rem 0;
  margin: 0;
  font-weight: 500;
}

.card img {
  max-width: 100%;
  height: auto;
}

.card p {
  line-height: 1.5;
  padding: 0 1rem;
  margin: 0 0 1rem;
}

.warning {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  background-color: #fed7d7;
  border-top: 1px solid #f56565;
  padding: 10px;
  color: #f56565;
}

@supports (grid-template-rows: subgrid) {
  .warning {
    display: none;
  }
}

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-rows: 70px min-content auto;
  gap: 1rem;
}