fix responsive news and user critics location

src/pages/Home/index.tsx

@@ -76,7 +76,7 @@ function Home() {
           <SeparatorWithAnchor pageLink='#' pageName='Recent News / Event' secondLink='#' />
           <div className={"mt-5"}>
             {news.data.map((x: News) => (
-              <div class={"text-sm"}style={{ display: 'inline-block', width: '33.3%', padding: '0 1% 15px', verticalAlign: 'top' }}>
+              <div class={"text-sm news-card"}>
                 <div style={{ height: 250, overflow: 'hidden', borderRadius: 7 }}>
                   <img src={x.thumbnail} style={{ width: "100%", height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
                 </div>
@@ -98,14 +98,14 @@ function Home() {
 
         {/* START LOCATION CRITICS BEST AND USERS BEST SECTION */}
         <section className={"mt-10"}>
-          <div class={"grid grid-cols-4 gap-12"}>
+          <div class={"grid grid-cols-4 lg:gap-12"}>
-            <div className={'col-span-2 mr-5'}>
+            <div className={'col-span-4 lg:col-span-2 trending-section'}>
               <SeparatorWithAnchor pageLink='#' pageName={"Trending Now"} secondLink='#' />
-              <div className={'grid grid-cols-3'}>
+              <div className={'grid grid-cols-4 md:grid-cols-3'}>
                 {popular.data.map((x) => (
-                  <div className={"m-2 text-sm"}>
+                  <div className={"m-2 text-sm col-span-2 md:col-span-1"}>
-                    <div className={"mb-2"} style={{ overflow: 'hidden', borderRadius: 7 }}>
+                    <div className={"mb-2 trending-image-container"}>
-                      <img src={x.thumbnail} style={{ height: 200, width: '100%' }} />
+                      <img src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
                     </div >
                     <p>{x.name}</p>
                     <p className={"text-xs"}>{x.location}</p>
@@ -116,16 +116,16 @@ function Home() {
                 ))}
               </div>
             </div>
-            <div>
+            <div className={'col-span-2 lg:col-span-1'}>
               <SeparatorWithAnchor pageLink='#' pageName={"Critic's Best"} />
               {critics_users_pick.critics.map((x) => (
                 <div className={"pt-2 text-sm"}>
-                  <div className={'mr-2'} style={{ width: 72, height: 72, float: 'left' }}>
+                  <div className={'mr-2 critics-users-image'}>
                     <img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
                   </div>
                   <p className={'location-title'}>{x.name}</p>
-                  <p className={'text-xs'}>{x.location}</p>
+                  <p className={'text-xs location-province location-title'}>{x.location}</p>
-                  <div className={'mt-3'} style={{ display: 'inline-block' }}>
+                  <div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
                     <p className={'text-xs ml-2'}>{x.critic_rating}</p>
                     <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
                       <div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
@@ -136,16 +136,16 @@ function Home() {
               ))
               }
             </div>
-            <div>
+            <div className={'col-span-2 lg:col-span-1'}>
               <SeparatorWithAnchor pageLink='#' pageName={"User's Best"} />
               {critics_users_pick.users.map((x) => (
                 <div className={"pt-2 text-sm"}>
-                  <div className={'mr-2'} style={{ width: 72, height: 72, float: 'left' }}>
+                  <div className={'mr-2 critics-users-image'}>
                     <img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
                   </div>
                   <p className={'location-title'}>{x.name}</p>
-                  <p className={'text-xs'}>{x.location}</p>
+                  <p className={'text-xs location-province location-title'}>{x.location}</p>
-                  <div className={'mt-3'} style={{ display: 'inline-block' }}>
+                  <div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
                     <p className={'text-xs ml-2'}>{x.user_rating}</p>
                     <div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
                       <div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />

src/pages/Home/style.css

@@ -32,6 +32,30 @@
   color: #b99229;
 }
 
+.news-card {
+  display: inline-block;
+  width: 33.3%; 
+  padding: 0 1% 15px;
+  vertical-align: top;
+}
+
+
+.trending-image-container {
+  overflow: hidden;
+  border-radius: 7px;
+  height: 200px;
+}
+
+.critics-users-image {
+  width: 72px; 
+  height: 72px;
+  float: left;
+}
+
+.critics-users-rating-container {
+  margin-top: 0.75rem;
+}
+
 @media screen and (max-width: 1300px) {
   .recently-added-section-card {
     width: 24.3%;
@@ -42,6 +66,13 @@
   .recently-added-section-card {
     width: 33.3%;
   }
+  .news-card {
+    width: 50%;
+  }
+
+  .trending-section {
+    margin-bottom: 1.75rem;
+  }
 }
 
 @media screen and (max-width: 625px) {
@@ -50,6 +81,28 @@
   }
 }
 
-/* @media screen and (max-width: 425px) {
+@media screen and (max-width: 425px) {
-  
+  .news-card {
-} */
+    width: 100%;
+  }
+
+  .location-title {
+    font-size: 10px;
+  }
+
+  .critics-users-image {
+    height: 60px;
+    width: 60px;
+  }
+
+  .location-province {
+    font-size: 10px !important;
+  }
+
+  .trending-image-container {
+    overflow: hidden;
+    border-radius: 7px;
+    height: 100px;
+  }
+
+}