Merge pull request #116 from Olivi-9/master

update dependencies & change style in Home

1 files changed, 45 insertions, 6 deletions

diff --git a/src/components/TrafficNow.module.scss b/src/components/TrafficNow.module.scss
index e0e3271..2b0bcdf 100644
--- a/src/components/TrafficNow.module.scss
+++ b/src/components/TrafficNow.module.scss
@@ -1,24 +1,63 @@
 .TrafficNow {
   color: var(--color-text);
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  display: flex;
+  flex-direction: column;
   grid-gap: 20px;
+  gap: 20px;
   padding: 10px 0;
 
+  .overview {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+
+    & > div:nth-child(3) {
+      grid-column: 1 / -1;
+    }
+
+    @media (min-width: 768px) {
+      grid-template-columns: 1fr 1fr 1fr;
+
+      & > div:nth-child(3) {
+        grid-column: auto;
+      }
+    }
+  }
+
+  .chartsRow {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    @media (min-width: 768px) {
+      flex-direction: row;
+
+      & > .sec {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+
   .sec {
     padding: 20px;
     background-color: var(--color-bg-card);
     border-radius: 12px;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 140px;
 
     &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      box-shadow:
+        0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
     }
 
     .header {