<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.