<div class="rich-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod luctus quam in ullamcorper. Donec vehicula est at nibh viverra, in dapibus nunc cursus. Pellentesque ultricies sollicitudin lacus, non scelerisque nulla dignissim id. Etiam sollicitudin ex pellentesque, convallis quam eget, molestie tellus. Mauris sit amet nibh id dolor pretium hendrerit. Suspendisse urna libero, dictum vel rutrum sit amet, egestas vel diam. </p>
  <p>Fusce vel volutpat felis. Sed in malesuada lorem, id posuere est. In at leo vel massa lacinia volutpat. Nullam eget urna mi. Duis quis ornare sem. Proin dignissim felis metus, ac finibus lectus pulvinar a. Praesent mollis finibus nisl, vel imperdiet orci pretium non. Aliquam justo velit, pharetra sed nisl eget, convallis ultricies diam.</p>
  <blockquote class='twitter-tweet' data-lang='en'>
    <p lang='en' dir='ltr'>From easiest to toughest... <br><br>Ranking EVERY team&#39;s strength of schedule in 2019! 📊 <a href='https://t.co/07ktkwVu4r'>pic.twitter.com/07ktkwVu4r</a> &mdash; NFL (@NFL) <a href='https://twitter.com/NFL/status/1110625733775224833?ref_src=twsrc%5Etfw'>March 26, 2019</a> 
  </blockquote>
  <script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script>
  <p>Etiam sit amet velit eget purus fringilla venenatis non nec velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vel libero eget nibh congue tempus id nec justo. In ornare finibus turpis, ac faucibus nunc. Morbi ullamcorper est non turpis sollicitudin, nec semper justo cursus. Cras dui lectus, dapibus non augue et, volutpat sagittis risus. Suspendisse aliquam porttitor accumsan.</p>
  <h2>Aliquam rhoncus eros quis hendrerit placerat</h2>
  <p>Quisque <em>sollicitudin placerat nulla</em>  vel pharetra. Ut ultrices sapien eu porttitor pellentesque. Duis condimentum dolor lorem, sed finibus ex scelerisque nec. Curabitur et pretium justo, consequat finibus ligula. Praesent <a href='#'>dignissim</a>  dui vel dui ullamcorper, ac ultricies urna efficitur. In vitae aliquam nibh, ut placerat augue. Curabitur volutpat fringilla sem id bibendum. Praesent a tellus eget lorem tempor eleifend eu sed enim. Aliquam sed ipsum hendrerit, condimentum massa at, volutpat magna. Sed tortor dui, convallis vel arcu aliquet, blandit egestas ipsum. Nulla accumsan felis eu pretium tristique. Quisque est magna, tincidunt in nisi et, elementum porttitor enim. </p>
  <p>Vestibulum nec nisi vehicula, ultrices mauris sit amet, bibendum justo. Nulla vel scelerisque velit, vel aliquam nibh.</p>
  <ul>
    <li>Vivamus vel leo rhoncus, tincidunt tortor eu, feugiat augue.</li>
    <li>Sed et magna a ante facilisis vehicula.</li>
    <li>Nunc vel eros mollis, dictum elit a, tincidunt justo.</li>
    <li>Aenean accumsan est id dictum maximus.</li>
    <li>Praesent iaculis augue ac felis aliquam, vel lobortis enim fermentum.</li>
    <li>Mauris vitae lectus dapibus nunc pretium ultricies in vitae mi.</li>
  </ul>
  <p>Integer sed lorem magna. Nullam tristique pretium pellentesque. Sed porttitor lacus sit amet enim rhoncus finibus. Donec in mi vitae felis cursus luctus a ut justo. Nunc convallis libero id ligula vehicula, tempor blandit eros venenatis. Nam at velit quam. Aliquam posuere eleifend risus nec commodo. Mauris metus nunc, placerat vel urna ut, <a href='#'>consequat elementum</a>  nisi. Proin luctus lacus ac facilisis vehicula. Nullam quis libero et metus hendrerit posuere non sed sapien. Donec mattis orci suscipit tincidunt placerat.</p>
  <p>Suspendisse auctor magna in enim malesuada, in pretium dui fermentum. Nunc euismod, dolor ac bibendum efficitur, orci sem aliquam justo, eu tincidunt orci nisl placerat odio. Morbi eleifend, tortor ut aliquam eleifend, justo massa lacinia dui, ac volutpat tellus tortor hendrerit metus. Nulla luctus ex turpis, id imperdiet ante consectetur eget. Quisque dapibus vestibulum tellus, at eleifend ipsum pretium in.</p>
  <p>Donec ullamcorper velit nec orci semper, eu interdum sapien pellentesque. Sed euismod sapien nunc, a pharetra est vestibulum eu. Etiam ornare ipsum a tellus hendrerit sagittis. Etiam accumsan mollis leo, eu sodales mauris pellentesque sit amet. Aliquam pulvinar id felis vitae aliquam. </p>
  <ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    <li>Duis rhoncus urna ac finibus euismod</li>
    <li>Curabitur commodo enim eu dolor posuere, sit amet facilisis erat egestas</li>
    <li>Praesent condimentum mauris et hendrerit ultricies</li>
    <li>Aliquam porttitor quam vel urna maximus, vitae finibus arcu dignissim</li>
    <li>Duis eget ex dignissim, luctus quam et, consectetur massa</li>
  </ol>
  <p>Donec ex augue, hendrerit a aliquam at, semper a mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <h3>Pellentesque tincidunt magna velit, vel mollis odio finibus ut</h3>
  <p>Vivamus malesuada et arcu nec vehicula. Morbi malesuada sem auctor volutpat dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. <strike>Vestibulum ut nulla sit amet dui gravida condimentum.</strike> Ut sem justo, porta ut turpis ac, sagittis sodales lectus. Phasellus varius ante nec mi tincidunt, a euismod felis mollis. Nam tempus dictum risus, non consectetur eros ullamcorper ac. Quisque aliquam vestibulum nisi, vel fermentum felis volutpat ut.</p>
  <blockquote>
    <p>Nunc purus tortor, sagittis vitae nisl in, suscipit lacinia leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit sem, congue sit amet ullamcorper fermentum, mollis sit amet turpis. </p>
    <p>Morbi vitae urna pharetra sem convallis ultrices. Praesent facilisis, felis sit amet bibendum imperdiet, nibh augue ornare diam, et suscipit arcu diam sed turpis. Aenean ornare sem ipsum, a gravida turpis auctor a. Aenean consequat quam sed purus lobortis, vitae ullamcorper felis lobortis. </p>
    <p>Suspendisse a massa venenatis nulla elementum sodales. <em>Curabitur faucibus posuere augue, sit amet sagittis sem tincidunt finibus.</em>  In et nulla sapien. Nulla volutpat eleifend lorem, ut accumsan lectus bibendum a. Duis venenatis porttitor ullamcorper. Phasellus consectetur rhoncus eros a maximus.</p>
  </blockquote>
  <p>Suspendisse consequat enim a purus gravida, quis tincidunt nisl ultricies. Vestibulum vestibulum, dolor sed ultricies dapibus, massa lectus maximus nisl, ornare ultrices quam mi consequat nibh. Pellentesque auctor tempor ligula sit amet ultrices. Aliquam non ante et mauris pellentesque hendrerit nec in enim. Maecenas tincidunt ullamcorper magna, et interdum neque aliquet at. Pellentesque eu lacus eleifend, porta massa sit amet, aliquam diam. Fusce congue est eget urna aliquam, non convallis erat tempor. Sed consectetur nunc sed mi aliquet, ut cursus odio placerat. Sed venenatis in lectus in placerat. Aenean suscipit tincidunt eros ac sollicitudin. In eget erat sit amet tortor placerat sagittis. Cras lacus odio, rutrum eu fringilla varius, hendrerit a turpis. Vestibulum tristique non nisi vitae ultrices. Aliquam volutpat, justo et scelerisque tincidunt, neque nunc faucibus nunc, at vulputate sem nunc vel libero.</p>
  <h3>Nam semper libero et dui posuere euismod </h3>
  <p>Vestibulum quis euismod est. Donec aliquet mollis hendrerit. In euismod condimentum nulla non rutrum. Etiam nisi velit, bibendum nec varius ut, condimentum pretium nisi. Fusce vitae maximus orci. Proin vestibulum lobortis risus, quis suscipit leo. Integer aliquet pharetra magna, non convallis augue fermentum et.</p>
  <h4>Donec sollicitudin consectetur diam</h4>
  <p>Sed quis nisl quis erat euismod pretium vel vitae magna. Cras aliquet urna vitae magna maximus fringilla. Ut pharetra faucibus blandit. Sed malesuada massa nisl, porta condimentum dui scelerisque vel. In dictum varius pharetra. Mauris sed tempor est. Donec viverra dapibus commodo. Fusce eu odio eget enim finibus venenatis. Vivamus tincidunt eros nec bibendum lobortis. Sed dignissim massa sed rutrum vehicula. Proin ut maximus nulla, mattis facilisis ante.</p>
  <p><em>Proin condimentum bibendum erat id blandit <a href='#'>nisi tortor</a> </em> .</p>
  <h5>Duis ac turpis lectusnteger efficitur accumsan iaculis</h5>
  <p>Nullam sed elementum ipsum, in consequat arcu. Nunc in porttitor dui. Praesent eu purus eu nunc pellentesque porttitor quis et libero. Aenean gravida dui vitae turpis scelerisque, sit amet dignissim quam venenatis. </p>
  <p>Sed porta facilisis felis, a sollicitudin libero pellentesque eget. Praesent eget augue enim. Nullam pellentesque, lectus volutpat cursus dapibus, nulla risus molestie ipsum, eget ornare lectus ante aliquam massa. Suspendisse ac condimentum magna. </p>
  <h6>Etiam congue tempor rhoncus</h6>
  <p>Cras vel ultrices tortor. Pellentesque fringilla lacus ut justo venenatis, non efficitur dolor sagittis. Fusce dignissim facilisis sapien nec ultrices. Nunc placerat scelerisque tempus. Quisque molestie augue non felis auctor sollicitudin ac sollicitudin leo. Ut quis pulvinar ipsum, id rhoncus felis. </p>
  <p>Sed elit magna, suscipit eget euismod sed, consectetur sit amet orci. Nam ac eros ligula. Nam vitae aliquam ante. Fusce id nisi enim. Curabitur fringilla lectus vel imperdiet suscipit.</p>
</div>

.rich-text {
  * {
    margin: 0;

    & + * {
      margin-top: size(1);
    }
  }

  a {
    color: $endeavour;
    transition: color $duration__color;

    &:hover,
    &:focus {
      color: $color__highlightLight;
    }
  }

  h1 {
    font-size: $font-size__x-large;
    line-height: $line-height__large;
  }

  h2 {
    font-size: $font-size__large;
    line-height: $line-height__large;

    & + * {
      margin-top: 0;
    }
  }

  h3 {
    font-size: $font-size__medium;
    line-height: $line-height__large;

    & + * {
      margin-top: 0;
    }
  }

  h4,
  h5,
  h6 {
    font-family: $font-family__body;
    font-size: $font-size__medium;
    line-height: $line-height__medium;

    & + * {
      margin-top: 0;
    }
  }

  ul,
  ol {
    padding-left: size(1);
    margin-left: size(1);
  }

  ul {
    list-style-type: square;
  }

  li + li {
    margin-top: 0;
  }

  blockquote {
    margin-left: size(1);
    padding: 0 size(0.5) 0 size(1);
    border-left: 1px solid $color__highlightLight;
  }

  // tweet inserted in the rich-text;
  // override inline styles with !important;
  // so the vertical grid is maintained;
  .twitter-tweet {
    margin: 0 auto !important;
    padding: size(2) - 12px 0 size(2) - 16px;

    @include breakpoint($breakpoint--md) {
      padding-bottom: size(2) - 17px !important;
    }
  }

  // the tweet is followed by a SCRIPT tag;
  script {
    margin: 0;

    & + * {
      margin-top: 0;
    }
  }
}