Card UI improves

src/components/common/card/card.module.scss

@@ -20,6 +20,10 @@
       display: flex;
       color: var(--color-grey-light);
       gap: tovw(30px, 'default', 25px);
+
+      &.is_news {
+        gap: tovw(70px, 'default', 40px);
+      }
     }
 
     .author {
@@ -38,6 +42,10 @@
         margin-bottom: tovw(1px, 'default', 1px);
       }
     }
+
+    .separator {
+      color: var(--color-grey-light);
+    }
   }
 }
 

src/components/common/card/index.tsx

@@ -19,8 +19,12 @@ const Card = ({ className, data, isNews = false }: CardProps) => {
         {!isNews && (
           <span className={s.location}>{data?.location?.toUpperCase()}</span>
         )}
-        <div>
-          <span className={s.author}>BY — {data?.author}</span>
+        <div className={isNews ? s.is_news : ''}>
+          {isNews && (
+            <span className={s.author}>
+              BY <span className={s.separator}>—</span> {data?.author}
+            </span>
+          )}
           <span className={s.date}>
             {!isNews && <Calendar />}
             {data?.date}

src/components/primitives/link/link.module.scss

@@ -17,8 +17,8 @@
   &--nav {
     .icon {
       position: absolute;
-      right: tovw(-20px, 'default', -18px);
-      bottom: tovw(7px, 'default', 7px);
+      right: tovw(-24px, 'default', -26px);
+      bottom: tovw(6px, 'default', 3px);
       width: tovw(10px, 'default', 9px);
       height: tovw(10px, 'default', 8px);
       transition: transform var(--normal-transition);

src/components/sections/about/related/index.tsx

@@ -16,13 +16,13 @@ const Related = () => {
     loop: true,
     mode: 'free-snap',
     breakpoints: {
-      '(max-width: 1050px)': {
+      '(max-width: 850px)': {
         slides: { perView: 1.12, spacing: 12 }
       },
-      '(min-width: 1050px)': {
+      '(min-width: 851px)': {
         slides: { perView: 2, spacing: 22 }
       },
-      '(min-width: 1600px)': {
+      '(min-width: 1200px)': {
         slides: { perView: 3, spacing: 35 },
         loop: false
       }

src/components/sections/homepage/latest-news/index.tsx

@@ -24,10 +24,10 @@ const LatestNews = () => {
       setLoaded(true)
     },
     breakpoints: {
-      '(max-width: 1024px)': {
+      '(max-width: 1140px)': {
         slides: { perView: 2.915, spacing: 20 }
       },
-      '(max-width: 800px)': {
+      '(max-width: 850px)': {
         slides: { perView: 1.12, spacing: 12 }
       }
     }