feat(WEB-250): overview hero final ui

components/MyPages/Blocks/Overview/overview.module.css

@@ -4,43 +4,38 @@
 }
 
 .overview {
+  background-color: var(--Scandic-Brand-Scandic-Red);
+  border-radius: var(--Corner-radius-xLarge);
   display: grid;
-  gap: 1.7rem;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr;
+  padding: var(--Spacing-x7) var(--Spacing-x6);
 }
 
-@media screen and (max-width: 950px) {
+.divider {
+  padding-top: var(--Spacing-x2);
+}
+
+@media screen and (max-width: 767px) {
   .container {
     /* Full-width override styling */
     left: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
-    padding: 0 2rem 3.6rem;
+    padding: 0 var(--Spacing-x2);
     position: relative;
     right: 50%;
     width: 100dvw;
   }
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 768px) {
   .overview {
-    background-color: var(--some-grey-color, #f2f2f2);
-    border-radius: 0.8rem;
-    gap: 4rem;
+    gap: var(--Spacing-x2);
     grid-template-columns: 1fr 1fr;
-    justify-content: center;
-    left: unset;
-    margin-left: unset;
-    margin-right: unset;
-    padding: 3.5rem 2rem;
-    position: static;
-    right: unset;
-    width: 100%;
   }
-}
 
-@media screen and (min-width: 1100px) {
-  .overview {
-    gap: 10rem;
-    min-height: 35rem;
+  .divider {
+    display: none;
   }
 }