eSales Media Git repositories -GitList

Browse code

Fix width issue with vertical alignment in GridPlacementWrapper

Benjamin Roth authored on25/04/2025 16:21:26
Showing1 changed files

@@ -418,6 +418,10 @@
   }
 }
 
+.grid-placement-fragments {
+  width: 100%;
+}
+
 .content-grid-placement-wrapper {
   display: flex;
 }

Browse code

Add vertical alignment for GridPlacementWrapper

Benjamin Roth authored on25/04/2025 16:10:45
Showing1 changed files

public/css/grid-placement-wrapper.css

History View file @ef9973a

@@ -387,6 +387,37 @@
                                          grid-row-end: 8;
+                                       }
+                                     }
                                     +@media (min-width: 900px) {
                                     +  .grid-placement-content.-va-desktop-center {
                                     +    display: flex;
                                     +    align-items: center;
                                     +  }
                                     +  .grid-placement-content.-va-desktop-bottom {
                                     +    display: flex;
                                     +    align-items: flex-end;
                                     +  }
                                     +}
                                     +@media (max-width: 900px) {
                                     +  .grid-placement-content.-va-tablet-center {
                                     +    display: flex;
                                     +    align-items: center;
                                     +  }
                                     +  .grid-placement-content.-va-tablet-bottom {
                                     +    display: flex;
                                     +    align-items: flex-end;
                                     +  }
                                     +}
                                     +@media (max-width: 599px) {
                                     +  .grid-placement-content.-va-mobile-center {
                                     +    display: flex;
                                     +    align-items: center;
                                     +  }
                                     +  .grid-placement-content.-va-mobile-bottom {
                                     +    display: flex;
                                     +    align-items: flex-end;
                                     +  }
                                     +}
+                                    +
                                      .content-grid-placement-wrapper {
                                        display: flex;
+                                     }

Browse code

Fix width issue of grid placement wrapper

Benjamin Roth authored on25/04/2025 14:54:28
Showing1 changed files

public/css/grid-placement-wrapper.css

History View file @9e21876

@@ -394,6 +394,7 @@
                                      .content-grid-placement-wrapper,
                                      .gp--grid-container {
                                        min-height: 100%;
                                     +  width: 100%;
+                                     }
                                      .gp--grid-container {

Browse code

Increase row count from 6 to 7 for the GridPlacementWrapper

Benjamin Roth authored on03/03/2025 21:25:07
Showing1 changed files

public/css/grid-placement-wrapper.css

History View file @d51cb39

@@ -1,6 +1,6 @@
 :root {
   --grid-columns: 12;
-  --grid-rows: 6;
+  --grid-rows: 7;
 }
 
 .gp--col-start-1 {
@@ -147,295 +147,245 @@
   grid-row-end: 7;
 }
 
+.gp--row-start-7 {
+  grid-row-start: 7;
+}
+
+.gp--row-end-8 {
+  grid-row-end: 8;
+}
+
 @media (max-width: 900px) {
   .gp--col-tablet-start-1 {
     grid-column-start: 1;
   }
-
   .gp--col-tablet-end-2 {
     grid-column-end: 2;
   }
-
   .gp--col-tablet-start-2 {
     grid-column-start: 2;
   }
-
   .gp--col-tablet-end-3 {
     grid-column-end: 3;
   }
-
   .gp--col-tablet-start-3 {
     grid-column-start: 3;
   }
-
   .gp--col-tablet-end-4 {
     grid-column-end: 4;
   }
-
   .gp--col-tablet-start-4 {
     grid-column-start: 4;
   }
-
   .gp--col-tablet-end-5 {
     grid-column-end: 5;
   }
-
   .gp--col-tablet-start-5 {
     grid-column-start: 5;
   }
-
   .gp--col-tablet-end-6 {
     grid-column-end: 6;
   }
-
   .gp--col-tablet-start-6 {
     grid-column-start: 6;
   }
-
   .gp--col-tablet-end-7 {
     grid-column-end: 7;
   }
-
   .gp--col-tablet-start-7 {
     grid-column-start: 7;
   }
-
   .gp--col-tablet-end-8 {
     grid-column-end: 8;
   }
-
   .gp--col-tablet-start-8 {
     grid-column-start: 8;
   }
-
   .gp--col-tablet-end-9 {
     grid-column-end: 9;
   }
-
   .gp--col-tablet-start-9 {
     grid-column-start: 9;
   }
-
   .gp--col-tablet-end-10 {
     grid-column-end: 10;
   }
-
   .gp--col-tablet-start-10 {
     grid-column-start: 10;
   }
-
   .gp--col-tablet-end-11 {
     grid-column-end: 11;
   }
-
   .gp--col-tablet-start-11 {
     grid-column-start: 11;
   }
-
   .gp--col-tablet-end-12 {
     grid-column-end: 12;
   }
-
   .gp--col-tablet-start-12 {
     grid-column-start: 12;
   }
-
   .gp--col-tablet-end-13 {
     grid-column-end: 13;
   }
-
   .gp--row-tablet-start-1 {
     grid-row-start: 1;
   }
-
   .gp--row-tablet-end-2 {
     grid-row-end: 2;
   }
-
   .gp--row-tablet-start-2 {
     grid-row-start: 2;
   }
-
   .gp--row-tablet-end-3 {
     grid-row-end: 3;
   }
-
   .gp--row-tablet-start-3 {
     grid-row-start: 3;
   }
-
   .gp--row-tablet-end-4 {
     grid-row-end: 4;
   }
-
   .gp--row-tablet-start-4 {
     grid-row-start: 4;
   }
-
   .gp--row-tablet-end-5 {
     grid-row-end: 5;
   }
-
   .gp--row-tablet-start-5 {
     grid-row-start: 5;
   }
-
   .gp--row-tablet-end-6 {
     grid-row-end: 6;
   }
-
   .gp--row-tablet-start-6 {
     grid-row-start: 6;
   }
-
   .gp--row-tablet-end-7 {
     grid-row-end: 7;
   }
+  .gp--row-tablet-start-7 {
+    grid-row-start: 7;
+  }
+  .gp--row-tablet-end-8 {
+    grid-row-end: 8;
+  }
 }
 @media (max-width: 599px) {
   .gp--col-mobil-start-1 {
     grid-column-start: 1;
   }
-
   .gp--col-mobil-end-2 {
     grid-column-end: 2;
   }
-
   .gp--col-mobil-start-2 {
     grid-column-start: 2;
   }
-
   .gp--col-mobil-end-3 {
     grid-column-end: 3;
   }
-
   .gp--col-mobil-start-3 {
     grid-column-start: 3;
   }
-
   .gp--col-mobil-end-4 {
     grid-column-end: 4;
   }
-
   .gp--col-mobil-start-4 {
     grid-column-start: 4;
   }
-
   .gp--col-mobil-end-5 {
     grid-column-end: 5;
   }
-
   .gp--col-mobil-start-5 {
     grid-column-start: 5;
   }
-
   .gp--col-mobil-end-6 {
     grid-column-end: 6;
   }
-
   .gp--col-mobil-start-6 {
     grid-column-start: 6;
   }
-
   .gp--col-mobil-end-7 {
     grid-column-end: 7;
   }
-
   .gp--col-mobil-start-7 {
     grid-column-start: 7;
   }
-
   .gp--col-mobil-end-8 {
     grid-column-end: 8;
   }
-
   .gp--col-mobil-start-8 {
     grid-column-start: 8;
   }
-
   .gp--col-mobil-end-9 {
     grid-column-end: 9;
   }
-
   .gp--col-mobil-start-9 {
     grid-column-start: 9;
   }
-
   .gp--col-mobil-end-10 {
     grid-column-end: 10;
   }
-
   .gp--col-mobil-start-10 {
     grid-column-start: 10;
   }
-
   .gp--col-mobil-end-11 {
     grid-column-end: 11;
   }
-
   .gp--col-mobil-start-11 {
     grid-column-start: 11;
   }
-
   .gp--col-mobil-end-12 {
     grid-column-end: 12;
   }
-
   .gp--col-mobil-start-12 {
     grid-column-start: 12;
   }
-
   .gp--col-mobil-end-13 {
     grid-column-end: 13;
   }
-
   .gp--row-mobil-start-1 {
     grid-row-start: 1;
   }
-
   .gp--row-mobil-end-2 {
     grid-row-end: 2;
   }
-
   .gp--row-mobil-start-2 {
     grid-row-start: 2;
   }
-
   .gp--row-mobil-end-3 {
     grid-row-end: 3;
   }
-
   .gp--row-mobil-start-3 {
     grid-row-start: 3;
   }
-
   .gp--row-mobil-end-4 {
     grid-row-end: 4;
   }
-
   .gp--row-mobil-start-4 {
     grid-row-start: 4;
   }
-
   .gp--row-mobil-end-5 {
     grid-row-end: 5;
   }
-
   .gp--row-mobil-start-5 {
     grid-row-start: 5;
   }
-
   .gp--row-mobil-end-6 {
     grid-row-end: 6;
   }
-
   .gp--row-mobil-start-6 {
     grid-row-start: 6;
   }
-
   .gp--row-mobil-end-7 {
     grid-row-end: 7;
   }
+  .gp--row-mobil-start-7 {
+    grid-row-start: 7;
+  }
+  .gp--row-mobil-end-8 {
+    grid-row-end: 8;
+  }
 }
 .content-grid-placement-wrapper {
   display: flex;

Browse code

Allow grid to grow in height if content demands it

Benjamin Roth authored on03/03/2025 13:10:54
Showing1 changed files

public/css/grid-placement-wrapper.css

History View file @5a5a5fb

@@ -151,108 +151,143 @@
   .gp--col-tablet-start-1 {
     grid-column-start: 1;
   }
+
   .gp--col-tablet-end-2 {
     grid-column-end: 2;
   }
+
   .gp--col-tablet-start-2 {
     grid-column-start: 2;
   }
+
   .gp--col-tablet-end-3 {
     grid-column-end: 3;
   }
+
   .gp--col-tablet-start-3 {
     grid-column-start: 3;
   }
+
   .gp--col-tablet-end-4 {
     grid-column-end: 4;
   }
+
   .gp--col-tablet-start-4 {
     grid-column-start: 4;
   }
+
   .gp--col-tablet-end-5 {
     grid-column-end: 5;
   }
+
   .gp--col-tablet-start-5 {
     grid-column-start: 5;
   }
+
   .gp--col-tablet-end-6 {
     grid-column-end: 6;
   }
+
   .gp--col-tablet-start-6 {
     grid-column-start: 6;
   }
+
   .gp--col-tablet-end-7 {
     grid-column-end: 7;
   }
+
   .gp--col-tablet-start-7 {
     grid-column-start: 7;
   }
+
   .gp--col-tablet-end-8 {
     grid-column-end: 8;
   }
+
   .gp--col-tablet-start-8 {
     grid-column-start: 8;
   }
+
   .gp--col-tablet-end-9 {
     grid-column-end: 9;
   }
+
   .gp--col-tablet-start-9 {
     grid-column-start: 9;
   }
+
   .gp--col-tablet-end-10 {
     grid-column-end: 10;
   }
+
   .gp--col-tablet-start-10 {
     grid-column-start: 10;
   }
+
   .gp--col-tablet-end-11 {
     grid-column-end: 11;
   }
+
   .gp--col-tablet-start-11 {
     grid-column-start: 11;
   }
+
   .gp--col-tablet-end-12 {
     grid-column-end: 12;
   }
+
   .gp--col-tablet-start-12 {
     grid-column-start: 12;
   }
+
   .gp--col-tablet-end-13 {
     grid-column-end: 13;
   }
+
   .gp--row-tablet-start-1 {
     grid-row-start: 1;
   }
+
   .gp--row-tablet-end-2 {
     grid-row-end: 2;
   }
+
   .gp--row-tablet-start-2 {
     grid-row-start: 2;
   }
+
   .gp--row-tablet-end-3 {
     grid-row-end: 3;
   }
+
   .gp--row-tablet-start-3 {
     grid-row-start: 3;
   }
+
   .gp--row-tablet-end-4 {
     grid-row-end: 4;
   }
+
   .gp--row-tablet-start-4 {
     grid-row-start: 4;
   }
+
   .gp--row-tablet-end-5 {
     grid-row-end: 5;
   }
+
   .gp--row-tablet-start-5 {
     grid-row-start: 5;
   }
+
   .gp--row-tablet-end-6 {
     grid-row-end: 6;
   }
+
   .gp--row-tablet-start-6 {
     grid-row-start: 6;
   }
+
   .gp--row-tablet-end-7 {
     grid-row-end: 7;
   }
@@ -261,116 +296,158 @@
   .gp--col-mobil-start-1 {
     grid-column-start: 1;
   }
+
   .gp--col-mobil-end-2 {
     grid-column-end: 2;
   }
+
   .gp--col-mobil-start-2 {
     grid-column-start: 2;
   }
+
   .gp--col-mobil-end-3 {
     grid-column-end: 3;
   }
+
   .gp--col-mobil-start-3 {
     grid-column-start: 3;
   }
+
   .gp--col-mobil-end-4 {
     grid-column-end: 4;
   }
+
   .gp--col-mobil-start-4 {
     grid-column-start: 4;
   }
+
   .gp--col-mobil-end-5 {
     grid-column-end: 5;
   }
+
   .gp--col-mobil-start-5 {
     grid-column-start: 5;
   }
+
   .gp--col-mobil-end-6 {
     grid-column-end: 6;
   }
+
   .gp--col-mobil-start-6 {
     grid-column-start: 6;
   }
+
   .gp--col-mobil-end-7 {
     grid-column-end: 7;
   }
+
   .gp--col-mobil-start-7 {
     grid-column-start: 7;
   }
+
   .gp--col-mobil-end-8 {
     grid-column-end: 8;
   }
+
   .gp--col-mobil-start-8 {
     grid-column-start: 8;
   }
+
   .gp--col-mobil-end-9 {
     grid-column-end: 9;
   }
+
   .gp--col-mobil-start-9 {
     grid-column-start: 9;
   }
+
   .gp--col-mobil-end-10 {
     grid-column-end: 10;
   }
+
   .gp--col-mobil-start-10 {
     grid-column-start: 10;
   }
+
   .gp--col-mobil-end-11 {
     grid-column-end: 11;
   }
+
   .gp--col-mobil-start-11 {
     grid-column-start: 11;
   }
+
   .gp--col-mobil-end-12 {
     grid-column-end: 12;
   }
+
   .gp--col-mobil-start-12 {
     grid-column-start: 12;
   }
+
   .gp--col-mobil-end-13 {
     grid-column-end: 13;
   }
+
   .gp--row-mobil-start-1 {
     grid-row-start: 1;
   }
+
   .gp--row-mobil-end-2 {
     grid-row-end: 2;
   }
+
   .gp--row-mobil-start-2 {
     grid-row-start: 2;
   }
+
   .gp--row-mobil-end-3 {
     grid-row-end: 3;
   }
+
   .gp--row-mobil-start-3 {
     grid-row-start: 3;
   }
+
   .gp--row-mobil-end-4 {
     grid-row-end: 4;
   }
+
   .gp--row-mobil-start-4 {
     grid-row-start: 4;
   }
+
   .gp--row-mobil-end-5 {
     grid-row-end: 5;
   }
+
   .gp--row-mobil-start-5 {
     grid-row-start: 5;
   }
+
   .gp--row-mobil-end-6 {
     grid-row-end: 6;
   }
+
   .gp--row-mobil-start-6 {
     grid-row-start: 6;
   }
+
   .gp--row-mobil-end-7 {
     grid-row-end: 7;
   }
 }
+.content-grid-placement-wrapper {
+  display: flex;
+}
+
+.content-grid-placement-wrapper,
+.gp--grid-container {
+  min-height: 100%;
+}
+
 .gp--grid-container {
   display: grid;
   grid-template-columns: repeat(var(--grid-columns), minmax(0px, 1fr));
   grid-template-rows: repeat(var(--grid-rows), minmax(0px, auto));
-  position: absolute;
-  inset: 0;
 }

Browse code

Add a grid placement wrapper content element

Benjamin Roth authored on01/03/2025 21:22:53
Showing1 changed files

public/css/grid-placement-wrapper.css

History View file @1f7af1c

                                     new file mode 100644
@@ -0,0 +1,376 @@
                                     +:root {
                                     +  --grid-columns: 12;
                                     +  --grid-rows: 6;
                                     +}
+                                    +
                                     +.gp--col-start-1 {
                                     +  grid-column-start: 1;
                                     +}
+                                    +
                                     +.gp--col-end-2 {
                                     +  grid-column-end: 2;
                                     +}
+                                    +
                                     +.gp--col-start-2 {
                                     +  grid-column-start: 2;
                                     +}
+                                    +
                                     +.gp--col-end-3 {
                                     +  grid-column-end: 3;
                                     +}
+                                    +
                                     +.gp--col-start-3 {
                                     +  grid-column-start: 3;
                                     +}
+                                    +
                                     +.gp--col-end-4 {
                                     +  grid-column-end: 4;
                                     +}
+                                    +
                                     +.gp--col-start-4 {
                                     +  grid-column-start: 4;
                                     +}
+                                    +
                                     +.gp--col-end-5 {
                                     +  grid-column-end: 5;
                                     +}
+                                    +
                                     +.gp--col-start-5 {
                                     +  grid-column-start: 5;
                                     +}
+                                    +
                                     +.gp--col-end-6 {
                                     +  grid-column-end: 6;
                                     +}
+                                    +
                                     +.gp--col-start-6 {
                                     +  grid-column-start: 6;
                                     +}
+                                    +
                                     +.gp--col-end-7 {
                                     +  grid-column-end: 7;
                                     +}
+                                    +
                                     +.gp--col-start-7 {
                                     +  grid-column-start: 7;
                                     +}
+                                    +
                                     +.gp--col-end-8 {
                                     +  grid-column-end: 8;
                                     +}
+                                    +
                                     +.gp--col-start-8 {
                                     +  grid-column-start: 8;
                                     +}
+                                    +
                                     +.gp--col-end-9 {
                                     +  grid-column-end: 9;
                                     +}
+                                    +
                                     +.gp--col-start-9 {
                                     +  grid-column-start: 9;
                                     +}
+                                    +
                                     +.gp--col-end-10 {
                                     +  grid-column-end: 10;
                                     +}
+                                    +
                                     +.gp--col-start-10 {
                                     +  grid-column-start: 10;
                                     +}
+                                    +
                                     +.gp--col-end-11 {
                                     +  grid-column-end: 11;
                                     +}
+                                    +
                                     +.gp--col-start-11 {
                                     +  grid-column-start: 11;
                                     +}
+                                    +
                                     +.gp--col-end-12 {
                                     +  grid-column-end: 12;
                                     +}
+                                    +
                                     +.gp--col-start-12 {
                                     +  grid-column-start: 12;
                                     +}
+                                    +
                                     +.gp--col-end-13 {
                                     +  grid-column-end: 13;
                                     +}
+                                    +
                                     +.gp--row-start-1 {
                                     +  grid-row-start: 1;
                                     +}
+                                    +
                                     +.gp--row-end-2 {
                                     +  grid-row-end: 2;
                                     +}
+                                    +
                                     +.gp--row-start-2 {
                                     +  grid-row-start: 2;
                                     +}
+                                    +
                                     +.gp--row-end-3 {
                                     +  grid-row-end: 3;
                                     +}
+                                    +
                                     +.gp--row-start-3 {
                                     +  grid-row-start: 3;
                                     +}
+                                    +
                                     +.gp--row-end-4 {
                                     +  grid-row-end: 4;
                                     +}
+                                    +
                                     +.gp--row-start-4 {
                                     +  grid-row-start: 4;
                                     +}
+                                    +
                                     +.gp--row-end-5 {
                                     +  grid-row-end: 5;
                                     +}
+                                    +
                                     +.gp--row-start-5 {
                                     +  grid-row-start: 5;
                                     +}
+                                    +
                                     +.gp--row-end-6 {
                                     +  grid-row-end: 6;
                                     +}
+                                    +
                                     +.gp--row-start-6 {
                                     +  grid-row-start: 6;
                                     +}
+                                    +
                                     +.gp--row-end-7 {
                                     +  grid-row-end: 7;
                                     +}
+                                    +
                                     +@media (max-width: 900px) {
                                     +  .gp--col-tablet-start-1 {
                                     +    grid-column-start: 1;
                                     +  }
                                     +  .gp--col-tablet-end-2 {
                                     +    grid-column-end: 2;
                                     +  }
                                     +  .gp--col-tablet-start-2 {
                                     +    grid-column-start: 2;
                                     +  }
                                     +  .gp--col-tablet-end-3 {
                                     +    grid-column-end: 3;
                                     +  }
                                     +  .gp--col-tablet-start-3 {
                                     +    grid-column-start: 3;
                                     +  }
                                     +  .gp--col-tablet-end-4 {
                                     +    grid-column-end: 4;
                                     +  }
                                     +  .gp--col-tablet-start-4 {
                                     +    grid-column-start: 4;
                                     +  }
                                     +  .gp--col-tablet-end-5 {
                                     +    grid-column-end: 5;
                                     +  }
                                     +  .gp--col-tablet-start-5 {
                                     +    grid-column-start: 5;
                                     +  }
                                     +  .gp--col-tablet-end-6 {
                                     +    grid-column-end: 6;
                                     +  }
                                     +  .gp--col-tablet-start-6 {
                                     +    grid-column-start: 6;
                                     +  }
                                     +  .gp--col-tablet-end-7 {
                                     +    grid-column-end: 7;
                                     +  }
                                     +  .gp--col-tablet-start-7 {
                                     +    grid-column-start: 7;
                                     +  }
                                     +  .gp--col-tablet-end-8 {
                                     +    grid-column-end: 8;
                                     +  }
                                     +  .gp--col-tablet-start-8 {
                                     +    grid-column-start: 8;
                                     +  }
                                     +  .gp--col-tablet-end-9 {
                                     +    grid-column-end: 9;
                                     +  }
                                     +  .gp--col-tablet-start-9 {
                                     +    grid-column-start: 9;
                                     +  }
                                     +  .gp--col-tablet-end-10 {
                                     +    grid-column-end: 10;
                                     +  }
                                     +  .gp--col-tablet-start-10 {
                                     +    grid-column-start: 10;
                                     +  }
                                     +  .gp--col-tablet-end-11 {
                                     +    grid-column-end: 11;
                                     +  }
                                     +  .gp--col-tablet-start-11 {
                                     +    grid-column-start: 11;
                                     +  }
                                     +  .gp--col-tablet-end-12 {
                                     +    grid-column-end: 12;
                                     +  }
                                     +  .gp--col-tablet-start-12 {
                                     +    grid-column-start: 12;
                                     +  }
                                     +  .gp--col-tablet-end-13 {
                                     +    grid-column-end: 13;
                                     +  }
                                     +  .gp--row-tablet-start-1 {
                                     +    grid-row-start: 1;
                                     +  }
                                     +  .gp--row-tablet-end-2 {
                                     +    grid-row-end: 2;
                                     +  }
                                     +  .gp--row-tablet-start-2 {
                                     +    grid-row-start: 2;
                                     +  }
                                     +  .gp--row-tablet-end-3 {
                                     +    grid-row-end: 3;
                                     +  }
                                     +  .gp--row-tablet-start-3 {
                                     +    grid-row-start: 3;
                                     +  }
                                     +  .gp--row-tablet-end-4 {
                                     +    grid-row-end: 4;
                                     +  }
                                     +  .gp--row-tablet-start-4 {
                                     +    grid-row-start: 4;
                                     +  }
                                     +  .gp--row-tablet-end-5 {
                                     +    grid-row-end: 5;
                                     +  }
                                     +  .gp--row-tablet-start-5 {
                                     +    grid-row-start: 5;
                                     +  }
                                     +  .gp--row-tablet-end-6 {
                                     +    grid-row-end: 6;
                                     +  }
                                     +  .gp--row-tablet-start-6 {
                                     +    grid-row-start: 6;
                                     +  }
                                     +  .gp--row-tablet-end-7 {
                                     +    grid-row-end: 7;
                                     +  }
                                     +}
                                     +@media (max-width: 599px) {
                                     +  .gp--col-mobil-start-1 {
                                     +    grid-column-start: 1;
                                     +  }
                                     +  .gp--col-mobil-end-2 {
                                     +    grid-column-end: 2;
                                     +  }
                                     +  .gp--col-mobil-start-2 {
                                     +    grid-column-start: 2;
                                     +  }
                                     +  .gp--col-mobil-end-3 {
                                     +    grid-column-end: 3;
                                     +  }
                                     +  .gp--col-mobil-start-3 {
                                     +    grid-column-start: 3;
                                     +  }
                                     +  .gp--col-mobil-end-4 {
                                     +    grid-column-end: 4;
                                     +  }
                                     +  .gp--col-mobil-start-4 {
                                     +    grid-column-start: 4;
                                     +  }
                                     +  .gp--col-mobil-end-5 {
                                     +    grid-column-end: 5;
                                     +  }
                                     +  .gp--col-mobil-start-5 {
                                     +    grid-column-start: 5;
                                     +  }
                                     +  .gp--col-mobil-end-6 {
                                     +    grid-column-end: 6;
                                     +  }
                                     +  .gp--col-mobil-start-6 {
                                     +    grid-column-start: 6;
                                     +  }
                                     +  .gp--col-mobil-end-7 {
                                     +    grid-column-end: 7;
                                     +  }
                                     +  .gp--col-mobil-start-7 {
                                     +    grid-column-start: 7;
                                     +  }
                                     +  .gp--col-mobil-end-8 {
                                     +    grid-column-end: 8;
                                     +  }
                                     +  .gp--col-mobil-start-8 {
                                     +    grid-column-start: 8;
                                     +  }
                                     +  .gp--col-mobil-end-9 {
                                     +    grid-column-end: 9;
                                     +  }
                                     +  .gp--col-mobil-start-9 {
                                     +    grid-column-start: 9;
                                     +  }
                                     +  .gp--col-mobil-end-10 {
                                     +    grid-column-end: 10;
                                     +  }
                                     +  .gp--col-mobil-start-10 {
                                     +    grid-column-start: 10;
                                     +  }
                                     +  .gp--col-mobil-end-11 {
                                     +    grid-column-end: 11;
                                     +  }
                                     +  .gp--col-mobil-start-11 {
                                     +    grid-column-start: 11;
                                     +  }
                                     +  .gp--col-mobil-end-12 {
                                     +    grid-column-end: 12;
                                     +  }
                                     +  .gp--col-mobil-start-12 {
                                     +    grid-column-start: 12;
                                     +  }
                                     +  .gp--col-mobil-end-13 {
                                     +    grid-column-end: 13;
                                     +  }
                                     +  .gp--row-mobil-start-1 {
                                     +    grid-row-start: 1;
                                     +  }
                                     +  .gp--row-mobil-end-2 {
                                     +    grid-row-end: 2;
                                     +  }
                                     +  .gp--row-mobil-start-2 {
                                     +    grid-row-start: 2;
                                     +  }
                                     +  .gp--row-mobil-end-3 {
                                     +    grid-row-end: 3;
                                     +  }
                                     +  .gp--row-mobil-start-3 {
                                     +    grid-row-start: 3;
                                     +  }
                                     +  .gp--row-mobil-end-4 {
                                     +    grid-row-end: 4;
                                     +  }
                                     +  .gp--row-mobil-start-4 {
                                     +    grid-row-start: 4;
                                     +  }
                                     +  .gp--row-mobil-end-5 {
                                     +    grid-row-end: 5;
                                     +  }
                                     +  .gp--row-mobil-start-5 {
                                     +    grid-row-start: 5;
                                     +  }
                                     +  .gp--row-mobil-end-6 {
                                     +    grid-row-end: 6;
                                     +  }
                                     +  .gp--row-mobil-start-6 {
                                     +    grid-row-start: 6;
                                     +  }
                                     +  .gp--row-mobil-end-7 {
                                     +    grid-row-end: 7;
                                     +  }
                                     +}
                                     +.gp--grid-container {
                                     +  display: grid;
                                     +  grid-template-columns: repeat(var(--grid-columns), minmax(0px, 1fr));
                                     +  grid-template-rows: repeat(var(--grid-rows), minmax(0px, auto));
                                     +  position: absolute;
                                     +  inset: 0;
                                     +}

...	...	@@ -418,6 +418,10 @@
418	418	}
419	419	}
420	420
	421	+.grid-placement-fragments {
	422	+ width: 100%;
	423	+}
	424	+
421	425	.content-grid-placement-wrapper {
422	426	display: flex;
423	427	}

...	...	@@ -1,6 +1,6 @@
1	1	:root {
2	2	--grid-columns: 12;
3		- --grid-rows: 6;
	3	+ --grid-rows: 7;
4	4	}
5	5
6	6	.gp--col-start-1 {
...	...	@@ -147,295 +147,245 @@
147	147	grid-row-end: 7;
148	148	}
149	149
	150	+.gp--row-start-7 {
	151	+ grid-row-start: 7;
	152	+}
	153	+
	154	+.gp--row-end-8 {
	155	+ grid-row-end: 8;
	156	+}
	157	+
150	158	@media (max-width: 900px) {
151	159	.gp--col-tablet-start-1 {
152	160	grid-column-start: 1;
153	161	}
154		-
155	162	.gp--col-tablet-end-2 {
156	163	grid-column-end: 2;
157	164	}
158		-
159	165	.gp--col-tablet-start-2 {
160	166	grid-column-start: 2;
161	167	}
162		-
163	168	.gp--col-tablet-end-3 {
164	169	grid-column-end: 3;
165	170	}
166		-
167	171	.gp--col-tablet-start-3 {
168	172	grid-column-start: 3;
169	173	}
170		-
171	174	.gp--col-tablet-end-4 {
172	175	grid-column-end: 4;
173	176	}
174		-
175	177	.gp--col-tablet-start-4 {
176	178	grid-column-start: 4;
177	179	}
178		-
179	180	.gp--col-tablet-end-5 {
180	181	grid-column-end: 5;
181	182	}
182		-
183	183	.gp--col-tablet-start-5 {
184	184	grid-column-start: 5;
185	185	}
186		-
187	186	.gp--col-tablet-end-6 {
188	187	grid-column-end: 6;
189	188	}
190		-
191	189	.gp--col-tablet-start-6 {
192	190	grid-column-start: 6;
193	191	}
194		-
195	192	.gp--col-tablet-end-7 {
196	193	grid-column-end: 7;
197	194	}
198		-
199	195	.gp--col-tablet-start-7 {
200	196	grid-column-start: 7;
201	197	}
202		-
203	198	.gp--col-tablet-end-8 {
204	199	grid-column-end: 8;
205	200	}
206		-
207	201	.gp--col-tablet-start-8 {
208	202	grid-column-start: 8;
209	203	}
210		-
211	204	.gp--col-tablet-end-9 {
212	205	grid-column-end: 9;
213	206	}
214		-
215	207	.gp--col-tablet-start-9 {
216	208	grid-column-start: 9;
217	209	}
218		-
219	210	.gp--col-tablet-end-10 {
220	211	grid-column-end: 10;
221	212	}
222		-
223	213	.gp--col-tablet-start-10 {
224	214	grid-column-start: 10;
225	215	}
226		-
227	216	.gp--col-tablet-end-11 {
228	217	grid-column-end: 11;
229	218	}
230		-
231	219	.gp--col-tablet-start-11 {
232	220	grid-column-start: 11;
233	221	}
234		-
235	222	.gp--col-tablet-end-12 {
236	223	grid-column-end: 12;
237	224	}
238		-
239	225	.gp--col-tablet-start-12 {
240	226	grid-column-start: 12;
241	227	}
242		-
243	228	.gp--col-tablet-end-13 {
244	229	grid-column-end: 13;
245	230	}
246		-
247	231	.gp--row-tablet-start-1 {
248	232	grid-row-start: 1;
249	233	}
250		-
251	234	.gp--row-tablet-end-2 {
252	235	grid-row-end: 2;
253	236	}
254		-
255	237	.gp--row-tablet-start-2 {
256	238	grid-row-start: 2;
257	239	}
258		-
259	240	.gp--row-tablet-end-3 {
260	241	grid-row-end: 3;
261	242	}
262		-
263	243	.gp--row-tablet-start-3 {
264	244	grid-row-start: 3;
265	245	}
266		-
267	246	.gp--row-tablet-end-4 {
268	247	grid-row-end: 4;
269	248	}
270		-
271	249	.gp--row-tablet-start-4 {
272	250	grid-row-start: 4;
273	251	}
274		-
275	252	.gp--row-tablet-end-5 {
276	253	grid-row-end: 5;
277	254	}
278		-
279	255	.gp--row-tablet-start-5 {
280	256	grid-row-start: 5;
281	257	}
282		-
283	258	.gp--row-tablet-end-6 {
284	259	grid-row-end: 6;
285	260	}
286		-
287	261	.gp--row-tablet-start-6 {
288	262	grid-row-start: 6;
289	263	}
290		-
291	264	.gp--row-tablet-end-7 {
292	265	grid-row-end: 7;
293	266	}
	267	+ .gp--row-tablet-start-7 {
	268	+ grid-row-start: 7;
	269	+ }
	270	+ .gp--row-tablet-end-8 {
	271	+ grid-row-end: 8;
	272	+ }
294	273	}
295	274	@media (max-width: 599px) {
296	275	.gp--col-mobil-start-1 {
297	276	grid-column-start: 1;
298	277	}
299		-
300	278	.gp--col-mobil-end-2 {
301	279	grid-column-end: 2;
302	280	}
303		-
304	281	.gp--col-mobil-start-2 {
305	282	grid-column-start: 2;
306	283	}
307		-
308	284	.gp--col-mobil-end-3 {
309	285	grid-column-end: 3;
310	286	}
311		-
312	287	.gp--col-mobil-start-3 {
313	288	grid-column-start: 3;
314	289	}
315		-
316	290	.gp--col-mobil-end-4 {
317	291	grid-column-end: 4;
318	292	}
319		-
320	293	.gp--col-mobil-start-4 {
321	294	grid-column-start: 4;
322	295	}
323		-
324	296	.gp--col-mobil-end-5 {
325	297	grid-column-end: 5;
326	298	}
327		-
328	299	.gp--col-mobil-start-5 {
329	300	grid-column-start: 5;
330	301	}
331		-
332	302	.gp--col-mobil-end-6 {
333	303	grid-column-end: 6;
334	304	}
335		-
336	305	.gp--col-mobil-start-6 {
337	306	grid-column-start: 6;
338	307	}
339		-
340	308	.gp--col-mobil-end-7 {
341	309	grid-column-end: 7;
342	310	}
343		-
344	311	.gp--col-mobil-start-7 {
345	312	grid-column-start: 7;
346	313	}
347		-
348	314	.gp--col-mobil-end-8 {
349	315	grid-column-end: 8;
350	316	}
351		-
352	317	.gp--col-mobil-start-8 {
353	318	grid-column-start: 8;
354	319	}
355		-
356	320	.gp--col-mobil-end-9 {
357	321	grid-column-end: 9;
358	322	}
359		-
360	323	.gp--col-mobil-start-9 {
361	324	grid-column-start: 9;
362	325	}
363		-
364	326	.gp--col-mobil-end-10 {
365	327	grid-column-end: 10;
366	328	}
367		-
368	329	.gp--col-mobil-start-10 {
369	330	grid-column-start: 10;
370	331	}
371		-
372	332	.gp--col-mobil-end-11 {
373	333	grid-column-end: 11;
374	334	}
375		-
376	335	.gp--col-mobil-start-11 {
377	336	grid-column-start: 11;
378	337	}
379		-
380	338	.gp--col-mobil-end-12 {
381	339	grid-column-end: 12;
382	340	}
383		-
384	341	.gp--col-mobil-start-12 {
385	342	grid-column-start: 12;
386	343	}
387		-
388	344	.gp--col-mobil-end-13 {
389	345	grid-column-end: 13;
390	346	}
391		-
392	347	.gp--row-mobil-start-1 {
393	348	grid-row-start: 1;
394	349	}
395		-
396	350	.gp--row-mobil-end-2 {
397	351	grid-row-end: 2;
398	352	}
399		-
400	353	.gp--row-mobil-start-2 {
401	354	grid-row-start: 2;
402	355	}
403		-
404	356	.gp--row-mobil-end-3 {
405	357	grid-row-end: 3;
406	358	}
407		-
408	359	.gp--row-mobil-start-3 {
409	360	grid-row-start: 3;
410	361	}
411		-
412	362	.gp--row-mobil-end-4 {
413	363	grid-row-end: 4;
414	364	}
415		-
416	365	.gp--row-mobil-start-4 {
417	366	grid-row-start: 4;
418	367	}
419		-
420	368	.gp--row-mobil-end-5 {
421	369	grid-row-end: 5;
422	370	}
423		-
424	371	.gp--row-mobil-start-5 {
425	372	grid-row-start: 5;
426	373	}
427		-
428	374	.gp--row-mobil-end-6 {
429	375	grid-row-end: 6;
430	376	}
431		-
432	377	.gp--row-mobil-start-6 {
433	378	grid-row-start: 6;
434	379	}
435		-
436	380	.gp--row-mobil-end-7 {
437	381	grid-row-end: 7;
438	382	}
	383	+ .gp--row-mobil-start-7 {
	384	+ grid-row-start: 7;
	385	+ }
	386	+ .gp--row-mobil-end-8 {
	387	+ grid-row-end: 8;
	388	+ }
439	389	}
440	390	.content-grid-placement-wrapper {
441	391	display: flex;

...	...	@@ -151,108 +151,143 @@
151	151	.gp--col-tablet-start-1 {
152	152	grid-column-start: 1;
153	153	}
	154	+
154	155	.gp--col-tablet-end-2 {
155	156	grid-column-end: 2;
156	157	}
	158	+
157	159	.gp--col-tablet-start-2 {
158	160	grid-column-start: 2;
159	161	}
	162	+
160	163	.gp--col-tablet-end-3 {
161	164	grid-column-end: 3;
162	165	}
	166	+
163	167	.gp--col-tablet-start-3 {
164	168	grid-column-start: 3;
165	169	}
	170	+
166	171	.gp--col-tablet-end-4 {
167	172	grid-column-end: 4;
168	173	}
	174	+
169	175	.gp--col-tablet-start-4 {
170	176	grid-column-start: 4;
171	177	}
	178	+
172	179	.gp--col-tablet-end-5 {
173	180	grid-column-end: 5;
174	181	}
	182	+
175	183	.gp--col-tablet-start-5 {
176	184	grid-column-start: 5;
177	185	}
	186	+
178	187	.gp--col-tablet-end-6 {
179	188	grid-column-end: 6;
180	189	}
	190	+
181	191	.gp--col-tablet-start-6 {
182	192	grid-column-start: 6;
183	193	}
	194	+
184	195	.gp--col-tablet-end-7 {
185	196	grid-column-end: 7;
186	197	}
	198	+
187	199	.gp--col-tablet-start-7 {
188	200	grid-column-start: 7;
189	201	}
	202	+
190	203	.gp--col-tablet-end-8 {
191	204	grid-column-end: 8;
192	205	}
	206	+
193	207	.gp--col-tablet-start-8 {
194	208	grid-column-start: 8;
195	209	}
	210	+
196	211	.gp--col-tablet-end-9 {
197	212	grid-column-end: 9;
198	213	}
	214	+
199	215	.gp--col-tablet-start-9 {
200	216	grid-column-start: 9;
201	217	}
	218	+
202	219	.gp--col-tablet-end-10 {
203	220	grid-column-end: 10;
204	221	}
	222	+
205	223	.gp--col-tablet-start-10 {
206	224	grid-column-start: 10;
207	225	}
	226	+
208	227	.gp--col-tablet-end-11 {
209	228	grid-column-end: 11;
210	229	}
	230	+
211	231	.gp--col-tablet-start-11 {
212	232	grid-column-start: 11;
213	233	}
	234	+
214	235	.gp--col-tablet-end-12 {
215	236	grid-column-end: 12;
216	237	}
	238	+
217	239	.gp--col-tablet-start-12 {
218	240	grid-column-start: 12;
219	241	}
	242	+
220	243	.gp--col-tablet-end-13 {
221	244	grid-column-end: 13;
222	245	}
	246	+
223	247	.gp--row-tablet-start-1 {
224	248	grid-row-start: 1;
225	249	}
	250	+
226	251	.gp--row-tablet-end-2 {
227	252	grid-row-end: 2;
228	253	}
	254	+
229	255	.gp--row-tablet-start-2 {
230	256	grid-row-start: 2;
231	257	}
	258	+
232	259	.gp--row-tablet-end-3 {
233	260	grid-row-end: 3;
234	261	}
	262	+
235	263	.gp--row-tablet-start-3 {
236	264	grid-row-start: 3;
237	265	}
	266	+
238	267	.gp--row-tablet-end-4 {
239	268	grid-row-end: 4;
240	269	}
	270	+
241	271	.gp--row-tablet-start-4 {
242	272	grid-row-start: 4;
243	273	}
	274	+
244	275	.gp--row-tablet-end-5 {
245	276	grid-row-end: 5;
246	277	}
	278	+
247	279	.gp--row-tablet-start-5 {
248	280	grid-row-start: 5;
249	281	}
	282	+
250	283	.gp--row-tablet-end-6 {
251	284	grid-row-end: 6;
252	285	}
	286	+
253	287	.gp--row-tablet-start-6 {
254	288	grid-row-start: 6;
255	289	}
	290	+
256	291	.gp--row-tablet-end-7 {
257	292	grid-row-end: 7;
258	293	}
...	...	@@ -261,116 +296,158 @@
261	296	.gp--col-mobil-start-1 {
262	297	grid-column-start: 1;
263	298	}
	299	+
264	300	.gp--col-mobil-end-2 {
265	301	grid-column-end: 2;
266	302	}
	303	+
267	304	.gp--col-mobil-start-2 {
268	305	grid-column-start: 2;
269	306	}
	307	+
270	308	.gp--col-mobil-end-3 {
271	309	grid-column-end: 3;
272	310	}
	311	+
273	312	.gp--col-mobil-start-3 {
274	313	grid-column-start: 3;
275	314	}
	315	+
276	316	.gp--col-mobil-end-4 {
277	317	grid-column-end: 4;
278	318	}
	319	+
279	320	.gp--col-mobil-start-4 {
280	321	grid-column-start: 4;
281	322	}
	323	+
282	324	.gp--col-mobil-end-5 {
283	325	grid-column-end: 5;
284	326	}
	327	+
285	328	.gp--col-mobil-start-5 {
286	329	grid-column-start: 5;
287	330	}
	331	+
288	332	.gp--col-mobil-end-6 {
289	333	grid-column-end: 6;
290	334	}
	335	+
291	336	.gp--col-mobil-start-6 {
292	337	grid-column-start: 6;
293	338	}
	339	+
294	340	.gp--col-mobil-end-7 {
295	341	grid-column-end: 7;
296	342	}
	343	+
297	344	.gp--col-mobil-start-7 {
298	345	grid-column-start: 7;
299	346	}
	347	+
300	348	.gp--col-mobil-end-8 {
301	349	grid-column-end: 8;
302	350	}
	351	+
303	352	.gp--col-mobil-start-8 {
304	353	grid-column-start: 8;
305	354	}
	355	+
306	356	.gp--col-mobil-end-9 {
307	357	grid-column-end: 9;
308	358	}
	359	+
309	360	.gp--col-mobil-start-9 {
310	361	grid-column-start: 9;
311	362	}
	363	+
312	364	.gp--col-mobil-end-10 {
313	365	grid-column-end: 10;
314	366	}
	367	+
315	368	.gp--col-mobil-start-10 {
316	369	grid-column-start: 10;
317	370	}
	371	+
318	372	.gp--col-mobil-end-11 {
319	373	grid-column-end: 11;
320	374	}
	375	+
321	376	.gp--col-mobil-start-11 {
322	377	grid-column-start: 11;
323	378	}
	379	+
324	380	.gp--col-mobil-end-12 {
325	381	grid-column-end: 12;
326	382	}
	383	+
327	384	.gp--col-mobil-start-12 {
328	385	grid-column-start: 12;
329	386	}
	387	+
330	388	.gp--col-mobil-end-13 {
331	389	grid-column-end: 13;
332	390	}
	391	+
333	392	.gp--row-mobil-start-1 {
334	393	grid-row-start: 1;
335	394	}
	395	+
336	396	.gp--row-mobil-end-2 {
337	397	grid-row-end: 2;
338	398	}
	399	+
339	400	.gp--row-mobil-start-2 {
340	401	grid-row-start: 2;
341	402	}
	403	+
342	404	.gp--row-mobil-end-3 {
343	405	grid-row-end: 3;
344	406	}
	407	+
345	408	.gp--row-mobil-start-3 {
346	409	grid-row-start: 3;
347	410	}
	411	+
348	412	.gp--row-mobil-end-4 {
349	413	grid-row-end: 4;
350	414	}
	415	+
351	416	.gp--row-mobil-start-4 {
352	417	grid-row-start: 4;
353	418	}
	419	+
354	420	.gp--row-mobil-end-5 {
355	421	grid-row-end: 5;
356	422	}
	423	+
357	424	.gp--row-mobil-start-5 {
358	425	grid-row-start: 5;
359	426	}
	427	+
360	428	.gp--row-mobil-end-6 {
361	429	grid-row-end: 6;
362	430	}
	431	+
363	432	.gp--row-mobil-start-6 {
364	433	grid-row-start: 6;
365	434	}
	435	+
366	436	.gp--row-mobil-end-7 {
367	437	grid-row-end: 7;
368	438	}
369	439	}
	440	+.content-grid-placement-wrapper {
	441	+ display: flex;
	442	+}
	443	+
	444	+.content-grid-placement-wrapper,
	445	+.gp--grid-container {
	446	+ min-height: 100%;
	447	+}
	448	+
370	449	.gp--grid-container {
371	450	display: grid;
372	451	grid-template-columns: repeat(var(--grid-columns), minmax(0px, 1fr));
373	452	grid-template-rows: repeat(var(--grid-rows), minmax(0px, auto));
374		- position: absolute;
375		- inset: 0;
376	453	}