{{- $selection := .Page.Params -}}
<div class="mt-[5rem]"></div>
<div
  class="text-white w-full bg-brand-blue pb-4 {{$selection.heroImageMobile}} {{$selection.heroImageTablet}} {{$selection.heroImageDesktop}} bg-no-repeat bg-cover bg-[position:70%] {{$selection.customStyling}}">
  <div class="min-h-[30rem] md:pr-0 flex justify-start items-center max-w-[1200px] mx-auto">
    <div class="h-full flex flex-col pt-20 px-8 max-w-[600px] items-start">
      <div class="">
        <h1 class="text-6xl text-left md:text-8xl font-normal text-white sm:text-left mx-auto uppercase">
          {{$selection.heroHeading | markdownify}}</h1>
      </div>
      <div class="mt-4">
        <p class="text-2xl text-left font-bold text-yellow sm:text-left mx-auto tracking-[0.15rem] uppercase">
          {{$selection.heroSubheading}}
        </p>
      </div>
    </div>
  </div>
</div>