<article class="post">
  <h2 class="heading">Post’s heading</h2>
  <p class="paragraph">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Laudantium numquam adipisci recusandae officiis dolore tenetur,
    nisi, beatae praesentium, soluta ullam suscipit quas?
  </p>
</article>

<article class="post">
  <h2 class="heading">Post’s heading</h2>
  <p class="paragraph">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Laudantium numquam adipisci recusandae officiis dolore tenetur,
    nisi, beatae praesentium, soluta ullam suscipit quas?
  </p>
</article>

/* global styles */

body {
  background-color: LavenderBlush;
  color: Teal;
  font-size: 100%;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  line-height: 1.5;
  margin: 0;
  padding: 1rem;
}

*, ::after, ::before {
  box-sizing: border-box;
}


/* component styles */

.post {
  background-color: white;
  max-width: 480px;
  border-radius: 16px;
  padding: .5rem 1rem;
  margin: .5rem auto 1rem;
}

.heading {
  font-size: 2rem;
  margin: 0;
}


/* component styles for larger screens */

@media (min-width: 576px) {
  .post {
    padding: 1rem 2rem;
    margin: 1rem auto 2rem;
  }
  
  .heading {
    font-size: 3rem;
  }
}