diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 3afc98707..29bc3b273 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -38,7 +38,7 @@ export async function ThreeItemGrid() {
   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
-    <section className="mx-auto max-w-screen-2xl gap-4 pb-4 lg:grid lg:grid-cols-6 lg:grid-rows-2">
+    <section className="mx-auto grid max-w-screen-2xl gap-4 pb-4 lg:grid-cols-6 lg:grid-rows-2">
       <ThreeItemGridItem size="full" item={firstProduct} />
       <ThreeItemGridItem size="half" item={secondProduct} />
       <ThreeItemGridItem size="half" item={thirdProduct} />
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index 3b2e8ac36..188a5b406 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -107,10 +107,14 @@ export function VariantSelector({
           )?.availableForSale;
 
           const DynamicTag = isAvailableForSale ? Link : 'p';
+          const dynamicProps = {
+            ...(isAvailableForSale && { scroll: false })
+          };
 
           return (
             <DynamicTag
               key={value}
+              aria-disabled={!isAvailableForSale}
               href={optionUrl}
               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
               className={clsx(
@@ -123,6 +127,7 @@ export function VariantSelector({
                     !isAvailableForSale
                 }
               )}
+              {...dynamicProps}
             >
               {value}
             </DynamicTag>