ui : grid layers for jon offers & members

src/styles/content.scss

@@ -263,9 +263,18 @@ hdapp-available {
 }
 
 #profiles-list {
-  display: block;
-
+  @extend .grid-layer;
+  > sib-form {
+    grid-column-start: start;
+    grid-column-end: middle;
+    grid-row-start: start;
+    grid-row-end: middle;
+  }
   > div {
+    grid-column-start: start;
+    grid-column-end: end;
+    grid-row-start: middle;
+    grid-row-end: end;
     display: grid;
     margin-top: 1em;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -292,6 +301,21 @@ hdapp-available {
   }
 }
 
+#offers-list {
+  @extend .grid-layer;
+  > sib-form {
+    grid-column-start: start;
+    grid-column-end: middle;
+    grid-row-start: start;
+    grid-row-end: middle;
+  }
+  > div {
+    grid-column-start: start;
+    grid-column-end: end;
+    grid-row-start: middle;
+    grid-row-end: end;
+  }
+}
 #offers-list > sib-form > form {
   display: grid;
   grid-template-columns: 50% 50%;
@@ -440,7 +464,7 @@ hdapp-available {
   @extend .right-link;
   background-color: $color-white;
   color: $color-black;
-
+  flex-wrap: nowrap;
   .icon-idea {
     background-color: $color-yellow-light;
     border-radius: 100%;

src/styles/main.scss

@@ -311,6 +311,25 @@ sib-trigger.back {
   flex-direction: row-reverse;
 }
 
+
 .scrollY {
   overflow-y: auto;
 }
+
+.grid-layer{
+  display: grid;
+  grid-template-columns: [start]auto[middle]15em[end];
+  grid-template-rows: [start]10em[middle]auto[end];
+}
+.grid-layer-main{
+  grid-column-start: start;
+  grid-column-end: end;
+  grid-row-start: start;
+  grid-row-end: end;
+}
+.grid-layer-links{
+  grid-column-start: middle;
+  grid-column-end: end;
+  grid-row-start: start;
+  grid-row-end: middle;
+}