diff --git a/app/layout.tsx b/app/layout.tsx
index 74bbc1866..95e62e5bc 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -33,7 +33,7 @@ const inter = Inter({
 export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={inter.variable}>
-      <body className="bg-gray-50 text-black selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
+      <body className="text-black bg-gray-50 selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
         <Navbar />
         <Suspense>
           <main>{children}</main>
diff --git a/components/carousel.tsx b/components/carousel.tsx
index 3b47e7134..72bb4d47d 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -11,7 +11,7 @@ export async function Carousel() {
 
   return (
     <div className="relative w-full pb-6 overflow-hidden">
-      <div className="flex space-x-6 animate-carousel">
+      <div className="flex space-x-4 animate-carousel">
         {[...products, ...products].map((product, i) => (
           <Link
             key={`${product.handle}${i}`}
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index 6ddb31a65..b4e3772a8 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -29,7 +29,7 @@ export function GridTileImage({
       )}
     >
       {active !== undefined && active ? (
-        <span className="absolute h-full w-full bg-white opacity-25"></span>
+        <span className="absolute w-full h-full bg-white opacity-25"></span>
       ) : null}
       {props.src ? (
         <Image
