More generative art

src/layouts/index.html

@@ -177,8 +177,9 @@
   #gen-art-5{
     position:absolute;
     width:24.275vw;
-    height: 10vw;
+    height: 17.857vw;
-    right: 16.3vw;
+    margin-top: 20vw;
+    right: 8.371vw;
     z-index: 0;
     background-image: url("/Images/gen-art/glass-triangles.jpg");
     background-attachment: fixed;
@@ -187,11 +188,46 @@
     background-size: contain;
   }
 
+  #gen-art-6{
+    position:absolute;
+    width: 13.560vw;
+    height: 26.897vw;
+    margin-top: 50vw;
+    right: 37.667vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/candy-land.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  #gen-art-7{
+    position:absolute;
+    width: 17.504vw;
+    height: 26.897vw;
+    margin-top: 70vw;
+    left: 8.371vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
+    background-attachment: fixed;
+    background-position: top;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
 </style>
 
-<section class="statistics">
+<section class="statistics" style="padding-top: 8.371vw !important; padding-bottom: 8.371vw !important;">
+
+<!-- Generative Art for this section -->
 
 <div class="gen-art" id="gen-art-5"></div>
+<div class="gen-art" id="gen-art-6"></div>
+<div class="gen-art" id="gen-art-7"></div>
+
+<!-- End generative art -->
+
   <div class="container">
     <div class="row mb-5">
       <div class="col">
@@ -230,6 +266,8 @@
     border: 2px solid #949494;
     max-width: 41.741vw;
     background-color: #1a1a1a;
+    position: relative;
+    z-index:2;
   }
 
   .stat-head{