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-4xl sm:text-4xl md:text-5xl lg:text-6xl">$190</p>
          <h1 class="text-xl md:text-2xl lg:text-3xl font-medium mt-12">
            Nike Air Max
          </h1>
          <p class="text-base text-base-500 mt-1">Black</p>
          <p class="text-base 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 items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-base-500/30 inset-shadow-white/30 text-shadow-base-700 ring-base-700 bg-linear-to-b from-base-700 to-base-800 to-70% focus:outline-base-700 h-9 px-4 py-2 text-sm rounded-md"
          >
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</section>