spoko-design-system 1.18.1 → 1.20.0

package/src/pages/components/image.mdx

@@ -1,514 +1,514 @@
----
-title: "Jumbotron"
-layout: "../../layouts/MainLayout.astro"
----
-import Image from '../../components/Image.astro'
-
-# Image
-
-Image converted to AVIF format and resized.
-AVIF compresses images significantly better than older-generation formats such as WebP and JPEG.
-
-#
-Displaying great product images is one of the most important keys to e-Commerce success.
-
-
-
-- https://en.wikipedia.org/wiki/AVIF
-
-#
-
-You can choose the image format you need so that you do not unnecessarily load an image that is larger than the area in which you are displaying it. This ensures maximum page optimisation.
-
-- https://docs.astro.build/en/guides/images/
-
-#
-
-Use `.img--overlay` class for images on white background to make a layer with light grey overlay.
-
-
-## Small Image
-`.img--small`
-
-<div class="component-preview">
-  <div class="img--overlay img--4/3 img--small">
-  <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-          class: 'object-cover'
-        }
-      }
-    />
-  </div>
-
-
-    <div class="img--4/3 img--small">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-          class: 'object-cover'
-        }
-      }
-    />
-  </div>
-
-      <div class="img--4/3 img--small">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-          class: 'object-cover'
-        }
-      }
-    />
-  </div>
-</div>
-
-
-
-
-```js
-<div class="img--overlay img--4/3 img--small">
-  <Image
-    imageObject={
-      {
-        src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
-        alt: 'Image Alt',
-        height: '180',
-        width: '240',
-        class: 'object-cover'
-      }
-    }
-  />
-
-  <div class="img--4/3 img--small">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-          class: 'object-cover'
-        }
-      }
-    />
-  </div>
-
-  <div class="img--4/3 img--small">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-          class: 'object-cover'
-        }
-      }
-    />
-  </div>
-
-  
-
-</div>
-```
-
-
-## Medium Image
-`.img--medium`
-
-<div class="component-preview">
-  <a class="img--medium img--3/2 b-l b-white" href="#">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-        }
-      }
-    />
-  </a>
-
-  <a class="img--medium img--3/2 b-l b-white" href="#">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-          class: 'bg-gray-100/70'
-        }
-      }
-    />
-  </a>
-
-  <a class="img--medium img--3/2 b-l b-white" href="#">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-          class: 'bg-gray-100/70'
-        }
-      }
-    />
-  </a>
-</div>
-
-```ts
-  <a class="img--medium img--3/2 b-l b-white" href="#">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-        }
-      }
-    />
-  </a>
-
-  <a class="img--medium img--3/2 b-l b-white" href="#">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-          class: 'bg-gray-100/70'
-        }
-      }
-    />
-  </a>
-
-  <a class="img--medium img--3/2 b-l b-white" href="#">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
-          alt: 'Image Alt',
-          height: '180',
-          width: '240',
-          class: 'bg-gray-100/70'
-        }
-      }
-    />
-  </a>
-```
-
-## Responsive Image with srcset
-- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes
-
-<div class="component-preview">
-  <div class="h-full img--3/2 overflow-hidden">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=1970&t=st=1706315168',
-          alt: 'Image Alt',
-          height: '1350',
-          width: '1800',
-          class: 'bg-gray-100/70',
-          srcset: [430, 690, 960, 1200, 1800]
-        }
-      }
-    />
-  </div>
-</div>
-
-```js
- <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=1970&t=st=1706315168',
-          alt: 'Image Alt',
-          height: '1350',
-          width: '1800',
-          class: 'bg-gray-100/70',
-          srcset: [430, 690, 960, 1200, 1800]
-        }
-      }
-    />
-```
-
-
-
-## Image Aspect Ratios
-
-Image ratio, also known as aspect ratio, is how wide an image is in relation to how tall it is. 
-For viewing on a mobile device, the recommended image ratio is 1:1 (a square picture). 
-
-#
-Ready-made CSS classes:
-
-- `img--1/1`
-- `img--2/3`
-- `img--3/1`
-- `img--3/2`
-- `img--3/4`
-- `img--4/3`
-- `img--16/9`
-
-
-<div class="component-preview">
-   <div class="columns-2 lg:columns-4 w-full">
-      <div class="text-center mb-4">
-         <div class="img--medium img--1/1 b-l b-white w-full">
-            <Image
-            imageObject={
-            {
-            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-            alt: 'Image Alt',
-            height: '700',
-            width: '700',
-            }
-            }
-            />
-            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">1:1</div>
-         </div>
-      </div>
-
-      <div class="text-center mb-4">
-         <div class="img--medium img--3/1 b-l b-white w-full">
-            <Image
-            imageObject={
-            {
-            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-            alt: 'Image Alt',
-            height: '700',
-            width: '700',
-            }
-            }
-            />
-            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:1</div>
-         </div>
-      </div>
-
-      <div class="text-center mb-4">
-         <div class="img--medium img--4/3 b-l b-white w-full">
-            <Image
-            imageObject={
-            {
-            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-            alt: 'Image Alt',
-            height: '700',
-            width: '700',
-            }
-            }
-            />
-            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">4:3</div>
-         </div>
-      </div>
-      <div class="text-center mb-4">
-         <div class="img--medium img--3/2 b-l b-white w-full">
-            <Image
-            imageObject={
-            {
-            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-            alt: 'Image Alt',
-            height: '700',
-            width: '700',
-            }
-            }
-            />
-            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:2</div>
-         </div>
-      </div>
-
-      <div class="text-center mb-4">
-         <div class="img--medium img--16/9 b-l b-white w-full">
-            <Image
-            imageObject={
-            {
-            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-            alt: 'Image Alt',
-            height: '700',
-            width: '700',
-            }
-            }
-            />
-            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">16:9</div>
-         </div>
-      </div>
-      <div class="text-center mb-4">
-         <div class="img--medium img--3/4 b-l b-white w-full">
-            <Image
-            imageObject={
-            {
-            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-            alt: 'Image Alt',
-            height: '700',
-            width: '700',
-            }
-            }
-            />
-            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:4</div>
-         </div>
-      </div>
-      <div class="text-center mb-4">
-         <div class="img--medium img--2/3 b-l b-white w-full">
-            <Image
-            imageObject={
-            {
-            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-            alt: 'Image Alt',
-            height: '700',
-            width: '700',
-            }
-            }
-            />
-            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">2:3</div>
-         </div>
-      </div>
-   </div>
-</div>
-
-
-```js
-  <div class="img--medium img--1/1 b-l b-white w-full">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-          alt: 'Image Alt',
-          height: '700',
-          width: '700',
-        }
-      }
-    />
-  </div>
-
-  <div class="img--medium img--3/1 b-l b-white w-full">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-          alt: 'Image Alt',
-          height: '700',
-          width: '700',
-        }
-      }
-    />
-  </div>
-
-  <div class="img--medium img--4/3 b-l b-white w-full">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-          alt: 'Image Alt',
-          height: '700',
-          width: '700',
-        }
-      }
-    />
-  </div>
-
-  <div class="img--medium img--3/2 b-l b-white w-full">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-          alt: 'Image Alt',
-          height: '700',
-          width: '700',
-        }
-      }
-    />
-  </div>
-
-  <div class="img--medium img--16/9 b-l b-white w-full">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-          alt: 'Image Alt',
-          height: '300',
-          width: '300',
-        }
-      }
-    />
-  </div>
-
-  <div class="img--medium img--3/4 b-l b-white w-full">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-          alt: 'Image Alt',
-          height: '700',
-          width: '700',
-        }
-      }
-    />
-  </div>
-  
-  <div class="img--medium img--2/3 b-l b-white w-full">
-    <Image
-      imageObject={
-        {
-          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-          alt: 'Image Alt',
-          height: '700',
-          width: '700',
-        }
-      }
-    />
-  </div>
-
-```
-
-
-It is good to have all the images in the same ratio so that they look fairly uniform. Additionally, you can use a different ratio on desktop than on mobile view.
-
-### Image 1:1 on mobile, and 4:3 on desktop
-
-<div class="component-preview">
-  <div class="columns-1 md:columns-3">
-    <div class="img--medium img--1/1 md:img--4/3 b-l b-white w-full">
-      <Image
-        imageObject={
-          {
-            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-            alt: 'Image Alt',
-            height: '700',
-            width: '700',
-          }
-        }
-      />
-    </div>
-  </div>
-</div>
-```js
-<div class="img--medium img--1/1 md:img--4/3 b-l b-white w-full">
-  <Image
-    imageObject={
-      {
-        src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
-        alt: 'Image Alt',
-        height: '700',
-        width: '700',
-      }
-    }
-  />
-</div>
+---
+title: "Jumbotron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Image from '../../components/Image.astro'
+
+# Image
+
+Image converted to AVIF format and resized.
+AVIF compresses images significantly better than older-generation formats such as WebP and JPEG.
+
+#
+Displaying great product images is one of the most important keys to e-Commerce success.
+
+
+
+- https://en.wikipedia.org/wiki/AVIF
+
+#
+
+You can choose the image format you need so that you do not unnecessarily load an image that is larger than the area in which you are displaying it. This ensures maximum page optimisation.
+
+- https://docs.astro.build/en/guides/images/
+
+#
+
+Use `.img--overlay` class for images on white background to make a layer with light grey overlay.
+
+
+## Small Image
+`.img--small`
+
+<div class="component-preview">
+  <div class="img--overlay img--4/3 img--small">
+  <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+
+    <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+      <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+</div>
+
+
+
+
+```js
+<div class="img--overlay img--4/3 img--small">
+  <Image
+    imageObject={
+      {
+        src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+        alt: 'Image Alt',
+        height: '180',
+        width: '240',
+        class: 'object-cover'
+      }
+    }
+  />
+
+  <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+  <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+  
+
+</div>
+```
+
+
+## Medium Image
+`.img--medium`
+
+<div class="component-preview">
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+</div>
+
+```ts
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+```
+
+## Responsive Image with srcset
+- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes
+
+<div class="component-preview">
+  <div class="h-full img--3/2 overflow-hidden">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=1970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '1350',
+          width: '1800',
+          class: 'bg-gray-100/70',
+          srcset: [430, 690, 960, 1200, 1800]
+        }
+      }
+    />
+  </div>
+</div>
+
+```js
+ <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=1970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '1350',
+          width: '1800',
+          class: 'bg-gray-100/70',
+          srcset: [430, 690, 960, 1200, 1800]
+        }
+      }
+    />
+```
+
+
+
+## Image Aspect Ratios
+
+Image ratio, also known as aspect ratio, is how wide an image is in relation to how tall it is. 
+For viewing on a mobile device, the recommended image ratio is 1:1 (a square picture). 
+
+#
+Ready-made CSS classes:
+
+- `img--1/1`
+- `img--2/3`
+- `img--3/1`
+- `img--3/2`
+- `img--3/4`
+- `img--4/3`
+- `img--16/9`
+
+
+<div class="component-preview">
+   <div class="columns-2 lg:columns-4 w-full">
+      <div class="text-center mb-4">
+         <div class="img--medium img--1/1 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">1:1</div>
+         </div>
+      </div>
+
+      <div class="text-center mb-4">
+         <div class="img--medium img--3/1 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:1</div>
+         </div>
+      </div>
+
+      <div class="text-center mb-4">
+         <div class="img--medium img--4/3 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">4:3</div>
+         </div>
+      </div>
+      <div class="text-center mb-4">
+         <div class="img--medium img--3/2 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:2</div>
+         </div>
+      </div>
+
+      <div class="text-center mb-4">
+         <div class="img--medium img--16/9 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">16:9</div>
+         </div>
+      </div>
+      <div class="text-center mb-4">
+         <div class="img--medium img--3/4 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:4</div>
+         </div>
+      </div>
+      <div class="text-center mb-4">
+         <div class="img--medium img--2/3 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">2:3</div>
+         </div>
+      </div>
+   </div>
+</div>
+
+
+```js
+  <div class="img--medium img--1/1 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--3/1 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--4/3 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--3/2 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--16/9 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '300',
+          width: '300',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--3/4 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+  
+  <div class="img--medium img--2/3 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+```
+
+
+It is good to have all the images in the same ratio so that they look fairly uniform. Additionally, you can use a different ratio on desktop than on mobile view.
+
+### Image 1:1 on mobile, and 4:3 on desktop
+
+<div class="component-preview">
+  <div class="columns-1 md:columns-3">
+    <div class="img--medium img--1/1 md:img--4/3 b-l b-white w-full">
+      <Image
+        imageObject={
+          {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+```js
+<div class="img--medium img--1/1 md:img--4/3 b-l b-white w-full">
+  <Image
+    imageObject={
+      {
+        src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+        alt: 'Image Alt',
+        height: '700',
+        width: '700',
+      }
+    }
+  />
+</div>
 ```