Update README.md

README.md

@@ -3,22 +3,116 @@ Shukusei!
 Special thanks to canister
 
 - ## Requiem-BA+10
+  <!-- HTML -->
   <div class="grid-image">
   <img src="https://cdn.discordapp.com/attachments/979612332441362452/1172847449598074890/bsdf1.png" height="300px" width="200px"/>
   <img src="https://cdn.discordapp.com/attachments/979612332441362452/1172846942678679614/bsdf.png" height="300px" width="200px"/>
   </div>
   Base*0.5 + BA+10*0.5
+  <style>
+  /* CSS */
+  .grid-image {
+      display:flex;
+      flex-wrap:wrap;
+      align-items:flex-start;
+      margin:30px 0;
+  }
+  .grid-image img {
+      width:calc(33.333% - 10px);
+      margin:0 15px 15px 0;
+  }
+  .grid-image img:nth-of-type(3n),
+  .grid-image img:last-child {
+      margin-right:0;
+  }
+  @media screen and (max-width:640px){
+    .grid-image img {
+      width:calc(50% - 15px);
+    }
+  }
+  @media screen and (max-width:480px){
+    .grid-image img:nth-of-type(2n) {
+      margin-right:0;
+    }
+    .grid-image img:nth-of-type(3n) {
+      margin-right:15px;
+    }
+  }
+  </style>
   
 - ## Requiem-monolotus
+  <!-- HTML -->
   <div class="grid-image">
   <img src="https://cdn.discordapp.com/attachments/979612332441362452/1172847762744807545/csdf.png" height="300px" width="200px"/>
   <img src="https://cdn.discordapp.com/attachments/979612332441362452/1172847763466223656/csdf1.png" height="300px" width="200px"/>
   </div>
+  <style>
+  /* CSS */
+  .grid-image {
+      display:flex;
+      flex-wrap:wrap;
+      align-items:flex-start;
+      margin:30px 0;
+  }
+  .grid-image img {
+      width:calc(33.333% - 10px);
+      margin:0 15px 15px 0;
+  }
+  .grid-image img:nth-of-type(3n),
+  .grid-image img:last-child {
+      margin-right:0;
+  }
+  @media screen and (max-width:640px){
+    .grid-image img {
+      width:calc(50% - 15px);
+    }
+  }
+  @media screen and (max-width:480px){
+    .grid-image img:nth-of-type(2n) {
+      margin-right:0;
+    }
+    .grid-image img:nth-of-type(3n) {
+      margin-right:15px;
+    }
+  }
+  </style>
+  
   Base*0.25 + monolotus*0.75
 
 - ## Requiem-Gamma
+  <!-- HTML -->
   <div class="grid-image">
   <img src="https://cdn.discordapp.com/attachments/979612332441362452/1172846820544753674/asdf.png" height="300px" width="200px"/>
   <img src="https://cdn.discordapp.com/attachments/979612332441362452/1172848364010881034/asdf1.png" height="300px" width="200px"/>
   </div>
+  <style>
+  /* CSS */
+  .grid-image {
+      display:flex;
+      flex-wrap:wrap;
+      align-items:flex-start;
+      margin:30px 0;
+  }
+  .grid-image img {
+      width:calc(33.333% - 10px);
+      margin:0 15px 15px 0;
+  }
+  .grid-image img:nth-of-type(3n),
+  .grid-image img:last-child {
+      margin-right:0;
+  }
+  @media screen and (max-width:640px){
+    .grid-image img {
+      width:calc(50% - 15px);
+    }
+  }
+  @media screen and (max-width:480px){
+    .grid-image img:nth-of-type(2n) {
+      margin-right:0;
+    }
+    .grid-image img:nth-of-type(3n) {
+      margin-right:15px;
+    }
+  }
+  </style>
   Bse*0.3 + Gamma*0.7