From 1b2f5ba211f9c9dfaf20f343b768b6e9c1bba3b3 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Fri, 31 May 2024 13:10:06 +0500
Subject: [PATCH] fix adaptive reviews

---
 src/components/Reviews.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Reviews.tsx b/src/components/Reviews.tsx
index 6797737..d5398fe 100644
--- a/src/components/Reviews.tsx
+++ b/src/components/Reviews.tsx
@@ -45,9 +45,9 @@ function Reviews() {
   return (
     <div
       ref={ref}
-      className="container mx-auto xl:max-w-screen-2xl sm:mb-[120px] mb-20"
+      className="container mx-auto xl:max-w-screen-2xl sm:mb-[120px] mb-20 xl:mt-0 lg:mt-[620px] sm:mt-[340px] mt-[220px]"
     >
-      <div className="flex 2xl:h-[594px] xl:h-[484px] xl:border-b border-b-[#3D425C]">
+      <div className="flex 2xl:h-[594px] xl:h-[484px] xl:border-b border-b-[#3D425C] h-[484px] xl:flex-row flex-col-reverse">
         <div className="mx-auto flex gap-2 min-h-2 sm:hidden mt-4">
           {reviews.map((video, index) => (
             <div
@@ -61,7 +61,7 @@ function Reviews() {
             />
           ))}
         </div>
-        <div className="left 2xl:min-w-[496px] xl:min-w-[395px] flex flex-col justify-between gap-7 sm:pb-10 2xl:pr-10 xl:pr-8">
+        <div className="left 2xl:min-w-[496px] xl:min-w-[395px] flex flex-col justify-between gap-7 sm:pb-10 2xl:pr-10 xl:pr-8 ">
           <div className="">
             <h2 className="font-medium 2xl:text-[64px] xl:text-5xl text-[40px] sm:mb-10 mb-6 font-gilroy leading-10 xl:block hidden">
               <p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
@@ -72,7 +72,7 @@ function Reviews() {
             <div className="relative block sm:auto sm:bg-transparent h-[108px] bg-[#212431] p-4 sm:p-8 xl:p-0">
               <div className="absolute flex xl:flex-col">
                 <div
-                  className={`transition-opacity xl:w-[368px] sm:min-w-[354px]  min-w-[328px] duration-300 pr-10 flex items-start gap-6`}
+                  className={`transition-opacity xl:w-[368px] sm:min-w-[354px] min-w-[328px] duration-300 pr-10 flex items-start gap-6`}
                 >
                   <img
                     src={reviews[selectedImageIndex].avatar}
@@ -92,7 +92,7 @@ function Reviews() {
                   </div>
                 </div>
                 <p
-                  className={`font-normal 2xl:text-[16px] text-sm sm:block hidden w-1/2 xl:w-[363px]`}
+                  className={`font-normal 2xl:text-[16px] text-sm sm:block w-1/2 xl:w-[363px] hidden`}
                 >
                   {reviews[selectedImageIndex].desc}
                 </p>
@@ -125,7 +125,7 @@ function Reviews() {
           {reviews.map((video, index) => (
             <div
               key={video.id}
-              className={`relative aspect-video bg-black transition-transform duration-300 h-full w-auto flex items-center justify-center`}
+              className={`relative aspect-video bg-black transition-transform duration-300 h-full xl:w-auto flex items-center justify-center min-w-[100vw] xl:min-w-0`}
               style={{
                 transform: `translateX(-${
                   imageWidth * selectedImageIndex + 16 * selectedImageIndex
@@ -142,7 +142,7 @@ function Reviews() {
           ))}
         </div>
 
-        <div className="flex justify-between xl:hidden pb-8">
+        <div className="flex justify-between xl:hidden pb-8 items-start w-full">
           <h2 className="font-medium  2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy leading-10 flex gap-2 xl:flex-col sm:flex-row flex-col">
             <p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
               Отзывы