<div
  class="bg-white rounded-xl drop-shadow-2xl flex flex-col items-center w-[320px] h-[565px] md:w-[450px] md:h-[700px]"
>
  <img src="public/images/illustration-hero.svg" class="rounded-t-xl w-full" />
  <h1 class="text-xl font-extrabold my-7 md:text-3xl md:mt-10">
    Order Summary
  </h1>

  <p class="text-center text-desaturated-blue px-8 mb-5 md:px-12">
    You can now listen to millions of songs, audiobooks, and podcasts on any
    device anywhere you like!
  </p>

  <div
    class="bg-very-pale-blue rounded-xl p-4 w-[calc(100%-3rem)] flex flex-row md:w-[calc(100%-6rem)] md:h-24 md:items-center md:p-6"
  >
    <img src="public/images/icon-music.svg" class="md:w-12 md:h-12" />
    <div class="flex flex-col grow pl-3 md:pl-6 justify-center">
      <p class="font-bold text-sm text-dark-blue md:text-base">Annual Plan</p>
      <p class="text-desaturated-blue text-sm md:text-base">$59.99/year</p>
    </div>
    <button
      class="underline text-xs text-bright-blue font-bold hover:no-underline hover:text-warm-blue"
    >
      Change
    </button>
  </div>

  <button
    class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)] md:w-[calc(100%-6rem)] md:my-8 hover:bg-warm-blue"
  >
    Proceed to Payment
  </button>
  <button class="text-desaturated-blue font-bold hover:text-dark-blue">
    Cancel Order
  </button>
</div>
