update UI

src/components/Newspaper/Newspaper.scss

 @use "../../styles/variables";
+@import "../../styles/mixin";
 
 .newspaper {
-  &-img {
-    width: 100%;
-    max-height: 400px;
-    object-fit: cover;
-    transform: scale(0.9);
-    transition: transform 0.2s linear;
-  }
+  &-article {
+    flex-direction: row;
 
-  &:hover {
-    cursor: pointer;
+    @include tablet {
+      flex-direction: column;
+    }
 
-    .newspaper-img {
-      transform: scale(1);
+    &__img {
+      width: 100%;
+      max-height: 400px;
+      object-fit: cover;
+      transform: scale(0.9);
+      cursor: pointer;
+
+      @include tablet {
+        transform: scale(1);
+      }
     }
-  }
 
-  &-content {
-    margin-top: 40px;
+    &__content {
+      margin-top: 40px;
 
-    h6 {
-      font-size: 2.5rem;
-      padding-right: 50px;
+      @include tablet {
+        margin-top: 20px;
+      }
+
+      h6 {
+        font-size: 2.5rem;
+        padding-right: 50px;
+
+        @include tablet {
+          padding-right: 0;
+        }
+      }
     }
   }
 
@@ -45,4 +58,10 @@
       background-color: variables.$green-1;
     }
   }
+
+  &:last-child {
+    .newspaper-divider {
+      display: none;
+    }
+  }
 }

src/components/Newspaper/index.tsx

@@ -10,14 +10,14 @@ const Newspaper = (props: Props) => {
   const { description, img, label } = data;
 
   return (
-    <div className="newspaper mt-4">
-      <div className="row flex-nowrap">
-        <div className="col-7">
-          <img src={img} alt="poster" className="newspaper-img" />
+    <div className="newspaper">
+      <div className="row flex-nowrap newspaper-article">
+        <div className="col-12 col-lg-7">
+          <img src={img} alt="poster" className="newspaper-article__img" />
         </div>
 
         <div className="col">
-          <div className="newspaper-content">
+          <div className="newspaper-article__content">
             <h6>{label}</h6>
             <p>{description}</p>
           </div>

src/pages/MainPage.tsx

@@ -43,7 +43,7 @@ const newspapers: Array<INewspaper> = [
 
 const MainPage = () => {
   return (
-    <main className="container">
+    <main className="container py-3">
       {newspapers.map((newspaper) => (
         <Newspaper key={newspaper.label} data={newspaper} />
       ))}

src/styles/common.scss

@@ -12,3 +12,9 @@ html {
   -moz-box-sizing: inherit;
   box-sizing: inherit;
 }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}