From ddf21b234a0357b173e4813dfb4e8f75b436ae70 Mon Sep 17 00:00:00 2001
From: Jane Moroz <Moroz.jane@yahoo.com>
Date: Tue, 26 Sep 2023 14:37:02 +0300
Subject: [PATCH] fix: banner image fix

---
 src/components/Banner.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 24664289..20511a51 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -9,9 +9,17 @@ interface BannerProps {
 
 function Banner({ image, alt, title, description }: BannerProps) {
   return (
-    <div className="card w-full max-h-[320px] bg-accent-content flex flex-row px-20 py-10 box-border">
-      <Image src={image} alt={alt} width={454} height={200} priority={false} />
-      <div className="flex flex-col justify-center pl-24 gap-y-3.5">
+    <div className="card w-full max-h-[320px] bg-accent-content flex flex-row justify-between px-20 py-10 box-border gap-x-10 lg:gap-x-20">
+      <div className="h-[200px] w-[276px] relative shrink-0">
+        <Image
+          src={image}
+          alt={alt}
+          fill={true}
+          objectFit="contain"
+          priority={false}
+        />
+      </div>
+      <div className="flex flex-col max-w-[700px] 2xl:max-w-none justify-center gap-y-3.5">
         <h3 className="text-3xl font-bold text-black">{title}</h3>
         <p className="text-lg font-medium text-black">{description}</p>
       </div>