<section>
  <h2>Featured articles</h2>
  <ul class="featured-articles">
    <li>
      <article class="featured-articles__article">
        <a class="featured-articles__tag" href="#">Web APIs</a>
        <h3 class="featured-articles__title">
          <a href="#">CSS Custom Highlight API</a>
        </h3>
        <p class="featured-articles__summary truncate-mutliple-lines-ellipsis">
          The CSS Custom Highlight API provides a mechanism for styling arbitrary
          text ranges on a document by using JavaScript to create the ranges, and
          CSS to style them.
        </p>
      </article>
    </li>
    <li>
      <article class="featured-articles__article">
        <a class="featured-articles__tag" href="#">Web APIs</a>
        <h3 class="featured-articles__title">
          <a href="#">Server timing</a>
        </h3>
        <p class="featured-articles__summary truncate-mutliple-lines-ellipsis">
          Server-Timing is a part of the Performance API and allows servers to
          communicate metrics about the request-response cycle to the user agent.
          You can collect this information and act on server-side metrics in the
          same way as all the other metrics processed with the Performance API.
        </p>
      </article>
    </li>
    <li>
      <article class="featured-articles__article truncate-mutliple-lines-ellipsis">
        <a class="featured-articles__tag" href="#">JavaScript</a>
        <h3 class="featured-articles__title">
          <a href="#">JavaScript resource management</a>
        </h3>
        <p class="featured-articles__summary truncate-mutliple-lines-ellipsis">
          This guide talks about how to do resource management in JavaScript.
          Resource management is not exactly the same as memory management, which
          is a more advanced topic and usually handled automatically by
          JavaScript. Resource management is about managing resources that are not
          automatically cleaned up by JavaScript. Sometimes, it's okay to have
          some unused objects in memory, because they don't interfere with
          application logic, but resource leaks often lead to things not working,
          or a lot of excess memory usage. Therefore, this is not an optional
          feature about optimization, but a core feature to write correct
          programs!
        </p>
      </article>
    </li>
    <li>
      <article class="featured-articles__article truncate-mutliple-lines-ellipsis">
        <a class="featured-articles__tag" href="#">JavaScript</a>
        <h3 class="featured-articles__title">
          <a href="#">Temporal is coming to JavaScript</a>
        </h3>
        <p class="featured-articles__summary truncate-mutliple-lines-ellipsis">
          A new way to handle dates and times is being added to JavaScript. Let's
          take a look at Temporal, what problems it solves, the current state, and
          what you'll find in the new documentation about it on MDN.
        </p>
      </article>
    </li>
  </ul>
</section>

RESULT