product details #01

<section>
  <div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8 items-center">
      <!-- Product Image Gallery -->
      <img
        src="/store/shoes/airmax/1.png"
        class="size-full aspect-[16/10] object-cover object-center rounded-2xl lg:col-span-2"
        alt="Product image"
      />
      <!-- Product Details -->
      <div class="flex flex-col gap-8">
        <div>
          <p
            class="text-3xl leading-tight tracking-tight sm:text-4xl md:text-5xl lg:text-6xl"
          >
            $190
          </p>
          <h1
            class="text-lg leading-tight sm:text-xl md:text-2xl lg:text-3xl font-medium mt-12"
          >
            Nike Air Max
          </h1>
          <p class="text-base leading-normal text-base-500 mt-1">Black</p>
          <p
            class="text-base leading-normal text-base-500 mt-4 lg:text-balance"
          >
            Hitting the field in the late '60s, adidas airmaxS quickly became
            soccer's "it" shoe.
          </p>
        </div>
        <!-- Action Buttons -->
        <div class="flex mt-8">
          <button
            class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-white bg-base-900 hover:bg-base-800 focus:outline-base-800 h-9 px-4 py-2 text-sm rounded-md"
          >
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</section>