fix: fix the styles

src/shared/components/about-counter.tsx

@@ -37,7 +37,10 @@ export default function AboutCounter() {
   }, []);
 
   return (
-    <div ref={sectionRef} className='grid grid-cols-1 gap-6 text-center'>
+    <div
+      ref={sectionRef}
+      className='my-4 grid grid-cols-1 gap-6 text-center md:my-8'
+    >
       <div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
         <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
           <Users className='h-6 w-6 text-red-600' />

src/widgets/about-section.tsx

@@ -28,10 +28,12 @@ export const AboutSection = () => {
           </p>
         </div>
         <div className='my-4 grid items-center gap-6 sm:my-8 md:grid-cols-2 md:gap-12'>
-          <AboutCounter />
-
+          <div>
+            <AboutCounter />
+            <Features />
+          </div>
           <div
-            className='relative h-[400px] overflow-hidden rounded-xl md:h-[540px]'
+            className='relative h-[400px] overflow-hidden rounded-xl md:h-full'
             data-aos='zoom-in-down'
           >
             <Image
@@ -42,7 +44,6 @@ export const AboutSection = () => {
             />
           </div>
         </div>
-        <Features />
       </Container>
     </section>
   );