<article class="post">
  <h1 class="heading">Post’s heading</h1>
  <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">
  <h1 class="heading">Post’s heading</h1>
  <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 variables */

:root {
  --small-spacing: .5rem;
  --large-spacing: 1rem;
  --large-font-size: 2rem;
}


/* component variables on larger screens */

@media (min-width: 576px) {
  :root {
    --small-spacing: 1rem;
    --large-spacing: 2rem;
    --large-font-size: 3rem;
  }
}


/* component styles */

.post {
  background-color: white;
  max-width: 480px;
  border-radius: 16px;
  padding: var(--small-spacing) var(--large-spacing);
  margin: var(--small-spacing) auto  var(--large-spacing);
}

.heading {
  font-size: var(--large-font-size);
  margin: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.