From 56e1ef1cc7032662f0318c2e42e711a6c63d7302 Mon Sep 17 00:00:00 2001
From: Alex Castle <atcastle@gmail.com>
Date: Tue, 6 Sep 2022 15:14:40 -0700
Subject: [PATCH 1/2] Change sizes docs to use em instead of px

---
 docs/api-reference/next/future/image.md | 4 ++--
 docs/api-reference/next/image.md        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md
index ea8323fad240d0b..678c46b7fb9ca4d 100644
--- a/docs/api-reference/next/future/image.md
+++ b/docs/api-reference/next/future/image.md
@@ -248,8 +248,8 @@ const Example = () => (
     <Image
       src="/example.png"
       layout="fill"
-      sizes="(min-width: 75em) 33vw,
-              (min-width: 48em) 50vw,
+      sizes="(min-width: 1200px) 33vw,
+              (min-width: 768px) 50vw,
               100vw"
     />
   </div>
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index 23756edf0cab3a6..324a6ae60b7c8f4 100644
--- a/docs/api-reference/next/image.md
+++ b/docs/api-reference/next/image.md
@@ -147,8 +147,8 @@ const Example = () => (
     <Image
       src="/example.png"
       layout="fill"
-      sizes="(min-width: 75em) 33vw,
-              (min-width: 48em) 50vw,
+      sizes="(min-width: 1200px) 33vw,
+              (min-width: 768px) 50vw,
               100vw"
     />
   </div>

From 413fea42506408805a0ab243ae3ce735763914c4 Mon Sep 17 00:00:00 2001
From: Alex Castle <atcastle@gmail.com>
Date: Tue, 6 Sep 2022 16:18:25 -0700
Subject: [PATCH 2/2] Use max-width in sizes docs

---
 docs/api-reference/next/future/image.md | 6 +++---
 docs/api-reference/next/image.md        | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md
index 678c46b7fb9ca4d..b0a8883262c6e43 100644
--- a/docs/api-reference/next/future/image.md
+++ b/docs/api-reference/next/future/image.md
@@ -248,9 +248,9 @@ const Example = () => (
     <Image
       src="/example.png"
       layout="fill"
-      sizes="(min-width: 1200px) 33vw,
-              (min-width: 768px) 50vw,
-              100vw"
+      sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
     />
   </div>
 )
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index 324a6ae60b7c8f4..60ffe36f20dac17 100644
--- a/docs/api-reference/next/image.md
+++ b/docs/api-reference/next/image.md
@@ -147,9 +147,9 @@ const Example = () => (
     <Image
       src="/example.png"
       layout="fill"
-      sizes="(min-width: 1200px) 33vw,
-              (min-width: 768px) 50vw,
-              100vw"
+      sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
     />
   </div>
 )