From c31333ab169ad8cc49b479a6f06350bb51155ff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=E1=BA=A3o=20H=C3=A0?= <baronn.ha@gmail.com>
Date: Fri, 20 Dec 2024 17:24:04 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20change=20css=20for=20docs/s?=
 =?UTF-8?q?howcase?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/SHOWCASE/index.mdx    |  2 +-
 docs/docs/SHOWCASE/showcase.css | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/docs/SHOWCASE/index.mdx b/docs/docs/SHOWCASE/index.mdx
index bedf679..320e607 100644
--- a/docs/docs/SHOWCASE/index.mdx
+++ b/docs/docs/SHOWCASE/index.mdx
@@ -24,7 +24,7 @@ List of used applications with `@baronha/react-native-multiple-image-picker`
         target="_blank"
         className="showcaseItem"
       >
-        <img src={item.banner} alt={item.title} />
+        <img src={item.banner} alt={item.title} className="showcaseBanner" />
         <b>{item.title}</b>
         <p className="showcaseTagline">{item?.tagline}</p>
       </a>
diff --git a/docs/docs/SHOWCASE/showcase.css b/docs/docs/SHOWCASE/showcase.css
index c789737..c9532a1 100644
--- a/docs/docs/SHOWCASE/showcase.css
+++ b/docs/docs/SHOWCASE/showcase.css
@@ -2,7 +2,7 @@
   display: flex;
   /* justify-content: space-between; */
   flex-wrap: wrap;
-  gap: 24px;
+  gap: 20px;
 }
 
 .showcaseItem {
@@ -18,7 +18,6 @@
 
 .showcaseItem b {
   font-size: 1rem;
-  
 }
 
 .showcaseItem .showcaseTagline {
@@ -30,6 +29,12 @@
   margin: 0;
 }
 
+.showcaseBanner {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+}
+
 @media (max-width: 768px) {
   .showcaseItem {
     flex: 100%;
@@ -40,7 +45,6 @@
 @media (min-width: 992px) {
   /* lg */
   .showcaseItem {
-    
     max-width: 33.333%;
   }
 }
@@ -48,7 +52,6 @@
 @media (min-width: 1200px) {
   /* xl */
   .showcaseItem {
-    
     max-width: 33.333%;
   }
 }
@@ -56,7 +59,6 @@
 @media (min-width: 1400px) {
   /* xxl */
   .showcaseItem {
-    
     max-width: 33.333%;
   }
 }