feat(WEB-250): overview hero final ui

components/MyPages/Blocks/Overview/Friend/friend.module.css

@@ -2,67 +2,61 @@
   align-items: center;
   display: flex;
   flex-direction: column;
+  gap: var(--Spacing-x4);
   justify-content: center;
 }
 
+.header {
+  display: flex;
+  flex-direction: column;
+}
+
+.levelLabel {
+  position: relative;
+  transform: rotate(-13deg) translate(0px, -15px);
+}
+
 .level {
-  color: var(--some-black-color, #000);
-  /* font-family: var(--ff-biro-script-plus); */
-  font-size: 2.1rem;
-  font-weight: 400;
-  letter-spacing: 4%;
-  line-height: 3.6rem;
-  margin: 0;
+  height: 105px;
+  width: 219px;
 }
 
 .name {
-  color: var(--some-black-color, #111);
-  /* font-family: var(--ff-brandon-text); */
-  font-size: 2.8rem;
-  font-weight: 900;
-  letter-spacing: -3%;
-  line-height: 2.8rem;
-  margin: 0;
-  text-transform: uppercase;
+  text-align: center;
+}
+
+.membership {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  justify-content: center;
 }
 
 .membershipContainer {
   align-items: center;
-  display: flex;
-  gap: 0.8rem;
+  background: var(--Scandic-Brand-Burgundy);
+  border-radius: var(--Corner-radius-Small);
+  display: grid;
+  gap: var(--Spacing-x1);
+  grid-template-columns: 1fr;
+  justify-items: center;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
 }
 
 .membershipId {
-  color: var(--some-black-color, #1e1e1e);
-  font-family: var(--ff-fira-mono);
-  font-size: 1.5rem;
-  font-weight: 500;
-  letter-spacing: 6%;
-  line-height: 1.8rem;
+  color: var(--Scandic-Brand-Pale-Peach);
+  /* TODO: Not yet exported by the design team, change to variable l8r */
+  font-family: var(--ff-fira-mono, "fira mono");
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.168px;
+  line-height: 140%;
   margin: 0;
 }
 
-@media screen and (max-width: 950px) {
-  .friend {
-    gap: 1.2rem;
-  }
-
-  .level {
-    transform: translate(-60%, 40%) rotate(-20deg);
-  }
-}
-
-@media screen and (min-width: 950px) {
-  .friend {
-    justify-self: flex-end;
-  }
-
-  .image {
-    margin-bottom: 2.6rem;
-    margin-top: 1.1rem;
-  }
-
-  .name {
-    margin-bottom: 1.2rem;
+@media screen and (min-width: 768px) {
+  .membershipContainer {
+    grid-template-columns: auto auto;
   }
 }