Hero

<div class="hero">
  <div class="hero__content">
    <h1 class="hyphens-auto md:hyphens-none" lang="nl">Thema’s</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum
      dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
    </p>
    <p>
      <a href="javascript:void();" class="link link-cta | group text-red-500 | hover">
        <span>Bekijk thema's</span>
      </a>
    </p>
  </div>
  <div class="hero__visual | relative -mx-4 md:ml-0 lg:mx-0 text-blue-500">
    <div
      class="hero-placeholder | grid place-items-center w-full max-w-full object-cover lg:rounded-xl text-grey-300 bg-grey-100 z-10"
    >
      geen afbeelding
    </div>
    <div class="hero__artifact" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 693 162">
        <!-- SVG content -->
      </svg>
    </div>
  </div>
</div>