<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/reset.css" rel="stylesheet">
<link href="setup.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<section>
<h2>“Big quotes”</h2>
<p>This is just a paragraph, so we have some other text to align to.</p>
</section>
<section>
<h2>“Big quotes”</h2>
<p>This is just a paragraph, so we have some other text to align to.</p>
</section>
<section>
<h2>Big quotes</h2>
<p>This is just a paragraph, so we have some other text to align to.</p>
</section>
</body>
</html>
body {
--base: 20px;
display: grid;
font-family: 'Helvetica', sans-serif;
gap: var(--base);
padding: var(--base);
}
section {
background-color: gold;
padding: calc(var(--base) / 2);
}
h2 { font-size: calc(var(--base) * 3); }
section { padding: var(--base) calc(2 * var(--base)); }
h2 { line-height: 90%; }
p { margin-top: var(--base); }
section:nth-child(2) h2::first-letter {
color: tomato;
margin-left: -0.35em;
}
section:nth-child(3) h2::before {
content: '“';
margin-left: -0.35em;
}
section:nth-child(3) h2::after { content: '”'; }
section:nth-child(3) h2::before,
section:nth-child(3) h2::after {
color: tomato;
font-family: serif;
}