<div class="demo">
  <h1>Quam nemo umquam voluptatem appellavit</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://loripsum.net/" target="_blank">Nam quid possumus facere melius?</a> Hoc ille tuus non vult omnibusque ex rebus voluptatem quasi mercedem exigit. <i>Cyrenaici quidem non recusant;</i> Si autem id non concedatur, non continuo vita beata tollitur. <a href="http://loripsum.net/" target="_blank">Duo Reges: constructio interrete.</a> </p>

  <h2>Quando enim Socrates</h2>

  <p>Utilitatis causa amicitia est quaesita. <b>Quod quidem nobis non saepe contingit.</b> Inde sermone vario sex illa a Dipylo stadia confecimus. Quando enim Socrates, qui parens philosophiae iure dici potest, quicquam tale fecit? Illi enim inter se dissentiunt. An tu me de L. <i>Quae cum essent dicta, discessimus.</i> </p>

  <blockquote cite="http://loripsum.net">
    Tuus non vult omnibusque ex rebus voluptatem quasi mercedem exigit.
  </blockquote>

  <h2>Quando enim Socrates</h2>
  <blockquote cite="http://loripsum.net">
    Verum hoc loco sumo verbis his eandem certe vim voluptatis Epicurum nosse quam ceteros.
  </blockquote>
  <ol>
    <li>Quae contraria sunt his, malane?</li>
    <li>Quod autem in homine praestantissimum atque optimum est, id deseruit.</li>
    <li>Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo;</li>
    <li>Quid autem habent admirationis, cum prope accesseris?</li>
  </ol>
  <div class="cta">
    <h3>There could've been something awesome here</h3>
  </div>

  <p>Quam nemo umquam voluptatem appellavit, appellat; <b>Sed fortuna fortis;</b> Mihi enim satis est, ipsis non satis. Quam tu ponis in verbis, ego positam in re putabam. Estne, quaeso, inquam, sitienti in bibendo voluptas? Videamus animi partes, quarum est conspectus illustrior; Quae animi affectio suum cuique tribuens atque hanc, quam dico. Tum ego: Non mehercule, inquam, soleo temere contra Stoicos, non quo illis admodum assentiar, sed pudore impedior; </p>

  <h2>This is another title</h2>
  <div class="cta">
    <h3>There could've been something awesome here</h3>
  </div>
  <p>Videamus animi partes, quarum est conspectus illustrior; Quae animi affectio suum cuique tribuens atque hanc, quam dico. Tum ego: Non mehercule, inquam, soleo temere contra Stoicos, non quo illis admodum assentiar, sed pudore impedior; </p>
  <h2>This is another title</h2>
  <div class="cta">
    <h3>There could've been something awesome here</h3>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Open+Sans:wght@500&display=swap");

/* Check if the h2 is followed by a blockquote */
h2:has(+ blockquote) {
  margin-bottom: 0;
  color: hotpink;
}

/* Only center the h2 if the next sibling is a cta and the cta itself is the last item in our content */
h2:has(+ .cta:last-child) {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 0;
}

h2 + .cta {
  margin-top: 0;
}

h2 + blockquote {
  margin-inline: 0;
}

.demo {
  background: #fff;
  max-width: 800px;
  margin: 30px auto;
  padding: 40px;
  border-radius: 10px;
}

h1,
h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
}

blockquote {
  margin-block: 0;
  padding: 20px;
  border-top: 6px solid #ccc;
  border-bottom: 6px solid #ccc;
  background: #fafafa;
  font-size: 1.2rem;
  font-style: italic;
}

ol:has(+ .cta) .cta {
  margin-top: 0;
}

.cta {
  background: #496a81;
  color: #fff;
  border-radius: 16px;
  margin: 40px 0;
  padding: 20px;
  text-align: center;
}

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

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffc482;
  font-family: "Lora", serif;
  font-size: 1.05rem;
  line-height: 1.55;
}