small fixes

app/[locale]/about/about-narai-detail.tsx

@@ -17,8 +17,8 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
   return (
     <div className="w-full px-6">
       <div className="font-multilingual flex w-full flex-col items-center space-y-px pb-24 text-center font-extralight md:pb-48">
-        <h1 className="text-6xl">{t('about.001.title')}</h1>
+        <h1 className="text-5xl leading-tight md:text-6xl">{t('about.001.title')}</h1>
-        <h1 className="text-6xl">{t('about.001.subtitle')}</h1>
+        <h1 className="text-5xl leading-tight md:text-6xl">{t('about.001.subtitle')}</h1>
       </div>
 
       <div className="relative mx-auto max-w-screen-2xl">
@@ -26,7 +26,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
           src={AboutImage001}
           priority={true}
           alt="A picture of the exterior of the brewery building."
-          className={clsx('h-full w-full object-cover')}
+          className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
         />
       </div>
       <div
@@ -34,7 +34,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
           'font-multilingual mx-auto flex w-full max-w-3xl flex-col space-y-12 py-24 text-left font-extralight md:py-48'
         )}
       >
-        <h2 className="text-5xl">{t('about.002.title')}</h2>
+        <h2 className="text-3xl leading-tight md:text-5xl">{t('about.002.title')}</h2>
         <p className="text-base leading-loose">{t('about.002.para001')}</p>
         <p className="text-base leading-loose">{t('about.002.para002')}</p>
       </div>
@@ -44,7 +44,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
           src={AboutImage002}
           priority={true}
           alt="A picture of the interior of the brewery building."
-          className={clsx('h-full w-full object-cover')}
+          className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
         />
       </div>
 
@@ -53,7 +53,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
           'font-multilingual mx-auto flex w-full max-w-3xl flex-col space-y-12 py-24 text-left font-extralight md:py-48'
         )}
       >
-        <h2 className="text-5xl">{t('about.003.title')}</h2>
+        <h2 className="text-3xl leading-tight md:text-5xl">{t('about.003.title')}</h2>
         <p className="text-base leading-loose">{t('about.003.para001')}</p>
         <div>
           <div className="relative flex flex-row justify-end pb-6">
@@ -76,7 +76,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
             'font-multilingual mx-auto flex w-full max-w-screen-xl flex-col space-y-12 py-24 text-left font-extralight md:py-48'
           )}
         >
-          <div className="font-multilingual flex flex-row items-baseline space-x-4">
+          <div className="font-multilingual flex flex-col items-baseline space-y-0 md:flex-row md:space-x-4">
             <h2 className="text-5xl">{t('about.awards.title')}</h2>
             <h3 className="text-xl font-extralight">{t('about.awards.subtitle')}</h3>
           </div>
@@ -104,7 +104,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
             src={AboutImage003}
             priority={true}
             alt="A picture of the exterior of the brewery building."
-            className={clsx('h-full w-full object-cover')}
+            className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
           />
 
           <div className="font-multilingual flex flex-col space-y-12 font-extralight md:flex-row md:space-x-6 md:space-y-0">
@@ -127,7 +127,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
             src={AboutImage004}
             priority={true}
             alt="A picture of the rice fields and mountains of Nagano."
-            className={clsx('h-full w-full object-cover')}
+            className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
           />
 
           <div className="font-multilingual flex flex-col space-y-12 font-extralight md:flex-row md:space-x-6 md:space-y-0">
@@ -150,7 +150,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
             src={AboutImage005}
             priority={true}
             alt="A picture of the interior of the brewery."
-            className={clsx('h-full w-full object-cover')}
+            className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
           />
 
           <div className="font-multilingual flex flex-col space-y-12 font-extralight md:flex-row md:space-x-6 md:space-y-0">
@@ -182,7 +182,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
           src={AboutImage006}
           priority={true}
           alt="A picture of Irie-san."
-          className={clsx('h-full w-full object-cover')}
+          className={clsx('aspect-square h-full w-full object-cover md:aspect-auto')}
         />
       </div>
     </div>

app/[locale]/page.tsx

@@ -60,7 +60,7 @@ export default async function HomePage({
       <div className="pt-12 md:pt-48">
         <HomepageProducts lang={locale} />
       </div>
-      <div className="py-48">
+      <div className="py-24 md:py-48">
         <NewsletterSignup />
       </div>
       <div className="relative mx-auto max-w-screen-xl">

components/cart/modal.tsx

@@ -63,7 +63,7 @@ export default function CartModal({
   return (
     <>
       <div>
-        <button aria-label="Open cart" onClick={openCart} className="w-20">
+        <button aria-label="Open cart" onClick={openCart}>
           <OpenCart quantity={cart?.totalQuantity} />
         </button>
         <Transition show={isOpen}>

components/grid/homepage-products.tsx

@@ -19,7 +19,7 @@ function HomepageProductsItem({ item, priority }: { item: Product; priority?: bo
       )}
     >
       <Link className="group block w-full" href={`/product/${item.handle}`}>
-        <div className="relative block aspect-tall overflow-hidden ">
+        <span className="relative block aspect-tall overflow-hidden">
           <GridTileImage
             src={image?.url}
             fill
@@ -27,15 +27,15 @@ function HomepageProductsItem({ item, priority }: { item: Product; priority?: bo
             priority={priority}
             alt={item.title}
           />
-        </div>
+        </span>
-        <div className="font-multilingual max-w-sm pb-24 pt-4 md:pb-0">
+        <span className="font-multilingual block max-w-sm pb-24 pt-4 md:pb-0">
           <Label
             title={item.title as string}
             amount={item.priceRange.maxVariantPrice.amount}
             currencyCode={item.priceRange.maxVariantPrice.currencyCode}
             size={size?.value}
           />
-          <div className="line-clamp-4 pt-2 font-extralight">
+          <span className="line-clamp-4 pt-2 font-extralight">
             <span>{item?.summary?.value}</span>{' '}
             <span className="ml-2 inline-flex flex-row items-center space-x-1 opacity-50 transition-opacity duration-150 group-hover:opacity-100">
               <span>read more.</span>
@@ -43,8 +43,8 @@ function HomepageProductsItem({ item, priority }: { item: Product; priority?: bo
                 <ChevronRightIcon width={16} />
               </span>
             </span>
-          </div>
+          </span>
-        </div>
+        </span>
       </Link>
       <InlineAddToCart variants={item.variants} availableForSale={item.availableForSale} />
     </div>

components/layout/newsletter-footer.tsx

@@ -7,7 +7,7 @@ export default function NewsletterSignup() {
 
   return (
     <div className="max-w-xl">
-      <div className="flex flex-row items-baseline justify-between space-x-6 pb-2">
+      <div className="flex flex-col items-start space-x-0 space-y-0 pb-2 md:flex-row md:items-baseline md:justify-between md:space-x-6">
         <h3 className="grow font-serif text-2xl tracking-wider">{t('newsletter.title')}</h3>
         <div className="font-multilingual">{t('footer.newsletter.promo')}</div>
       </div>
@@ -23,7 +23,7 @@ export default function NewsletterSignup() {
         <input
           type="email"
           name="EMAIL"
-          id="EMAIL"
+          id="email-address"
           autoComplete="email"
           required
           className={clsx(

components/layout/newsletter-signup.tsx

@@ -6,7 +6,7 @@ export default function NewsletterSignup() {
   const t = useTranslations('Index');
 
   return (
-    <div className="mx-auto max-w-xl space-y-4">
+    <div className="mx-auto max-w-xl space-y-4 px-4">
       <h3 className="font-serif text-2xl tracking-wider">{t('newsletter.title')}</h3>
       <div className="font-multilingual text-sm font-extralight">{t('newsletter.description')}</div>
       <form

components/layout/shoplist.tsx

@@ -7,11 +7,11 @@ export default function Shoplist() {
   const t = useTranslations('Index');
   return (
     <div className="font-multilingual mx-auto max-w-screen-xl space-y-4 px-6" id="shops">
-      <div className="flex w-full flex-row items-baseline space-x-12 pb-6">
+      <div className="flex w-full flex-row items-baseline space-x-12 pb-2 md:pb-6">
-        <h2 className="font-serif text-6xl tracking-wider">shop list</h2>
+        <h2 className="font-serif text-2xl tracking-wider md:text-5xl">shop list</h2>
         <h3 className="text-2xl font-extralight tracking-wider">{t('shops.subtitle')}</h3>
       </div>
-      <div className="grid w-full grid-cols-2 gap-px">
+      <div className="grid w-full grid-cols-1 gap-px md:grid-cols-2">
         <Link
           href="shop-list/#hokkaido"
           className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"