<main>
  <section class=article-card>
    <div class="backdrop"></div>
    <div class="user-img">
      <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SriAFu_4--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/83809/6eddcc8e-8942-4b2e-85ed-34c528ac1f14.png">
    </div>
    <h1>Hello World</h1>
    <span class="heart count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-heart-86ec9beca6e804af6db630e35a1e12ebd169103c0156e881e7f8a38933e1a546.png" alt="like">
      10
    </span>
    <span class="unicorn count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-unicorn-4a230c2064797b2aa08c12f522a6df8f6c9a0461839310c17ae01e5d95c6b67c.png" alt="unicorn">
      3
    </span>
    <span class="bookmark count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-bookmark-90f177c2910f9f8856fe23fc018a40d62f0a06263eab100cd5b710cad515ba04.png" alt="readinglist">
      1
    </span>
  </section>
  <section class=article-card>
    <div class="backdrop"></div>
    <div class="user-img">
      <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SriAFu_4--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/83809/6eddcc8e-8942-4b2e-85ed-34c528ac1f14.png">
    </div>
    <h1>Pancakes with Cheese: A Breakfast Manifesto</h1>
    <span class="heart count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-heart-86ec9beca6e804af6db630e35a1e12ebd169103c0156e881e7f8a38933e1a546.png" alt="like">
      142857
    </span>
    <span class="unicorn count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-unicorn-4a230c2064797b2aa08c12f522a6df8f6c9a0461839310c17ae01e5d95c6b67c.png" alt="unicorn">
      655
    </span>
    <span class="bookmark count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-bookmark-90f177c2910f9f8856fe23fc018a40d62f0a06263eab100cd5b710cad515ba04.png" alt="readinglist">
      1024
    </span>
  </section>
  <section class=article-card>
    <div class="backdrop"></div>
    <div class="user-img">
      <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SriAFu_4--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/83809/6eddcc8e-8942-4b2e-85ed-34c528ac1f14.png">
    </div>
    <h1>Read about my new product</h1>
    <span class="heart count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-heart-86ec9beca6e804af6db630e35a1e12ebd169103c0156e881e7f8a38933e1a546.png" alt="like">
      321
    </span>
    <span class="unicorn count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-unicorn-4a230c2064797b2aa08c12f522a6df8f6c9a0461839310c17ae01e5d95c6b67c.png" alt="unicorn">
      123
    </span>
    <span class="bookmark count">
      <img src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/emoji/emoji-one-bookmark-90f177c2910f9f8856fe23fc018a40d62f0a06263eab100cd5b710cad515ba04.png" alt="readinglist">
      2
    </span>
  </section>
</main>

:root {
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1, h2, h3 {
  margin: 0;
  font-weight: 700;
}

main {
  display: grid;
  width: 550px;
  grid-template-columns: calc(1vw + 7px - 1rem) 50px repeat(3, auto) 1fr;
  grid-row-gap: 2rem;
  grid-column-gap: 1rem;
  margin: 2rem 0;
}
.article-card {
  display: contents;
}
.backdrop {
  grid-column: 1 / -1;
  grid-row-end: span 4;
  
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  box-shadow: 3px 3px 0 #bababa;
}

.user-img {
  grid-column: 2 / span 1;
  grid-row-end: span 2;

  height: 50px;
  width: 50px;
}
.user-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.article-card h1 {
  grid-column: 3 / span 4;
  font-size: 2.7rem;
  margin-right: 1rem;
}
.count {
  margin-right: 1rem;
  font-size: 1.7rem;
}
.count img {
  width: 21px;
  height: 21px;
  vertical-align: -4px;
}
.heart {
  grid-column: 3;
}
.unicorn {
  grid-column: 4;
}
.bookmark {
  grid-column: 5;
}

document.querySelectorAll('.article-card')
  .forEach((card, n) => {
    const backdrop = card.querySelector('.backdrop'),
          userImg = card.querySelector('.user-img'),
          title = card.querySelector('h1'),
          counts =  card.querySelectorAll('.count')
    
    backdrop.style.gridRowStart = 4*n+1
    userImg.style.gridRowStart = 4*n+2
    title.style.gridRowStart = 4*n+2
    counts.forEach(count => count.style.gridRowStart = 4*n+3)
  })