<section id="relume" class="relative px-[5%] py-16 md:py-24 lg:py-28">
  <div class="container relative z-10">
    <div
      class="grid w-full grid-cols-1 items-start justify-between gap-6 md:grid-cols-[1fr_max-content] md:gap-x-12 md:gap-y-8 lg:gap-x-20"
    >
      <div class="md:mr-12 lg:mr-0">
        <div class="w-full max-w-lg">
          <h2
            class="mb-3 text-4xl font-bold leading-[1.2] text-text-alternative md:mb-4 md:text-5xl lg:text-6xl"
          >
            Medium length heading goes here
          </h2>
          <p class="text-text-alternative md:text-md">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        </div>
      </div>
      <div class="flex items-start justify-start gap-4">
        <button
          class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary bg-background-alternative text-text-alternative px-6 py-3"
          title="Button"
        >
          Button</button
        ><button
          class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-alternative text-text-alternative px-6 py-3"
          title="Button"
        >
          Button
        </button>
      </div>
    </div>
  </div>
  <div class="absolute inset-0 z-0">
    <img
      src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
      class="size-full object-cover"
      alt="Relume placeholder image"
    />
    <div class="absolute inset-0 bg-black/50"></div>
  </div>
</section>