product details #01

<section>
  <div class="relative px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div class="items-center mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- 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 mt-12 font-medium">
            Nike Air Max
          </h1>
          <p class="text-base mt-1 text-base-500">Black</p>
          <p class="text-base mt-4 text-base-500 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 font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 outline outline-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
          >
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</section>