Update README.md

README.md

@@ -2,6 +2,44 @@
 <br> 
 
 - ## Alpha Centauri
+  <!-- HTML -->
+  <div class="grid-image">
+  <img src="https://ac-p2.namu.la/20230308sac/7c460eddfc1e174b8750605446aab0a8787bba249182f428ecfadf7c8790e9be.png" height="300px" width="200px"/>
+  <img src="https://ac-p2.namu.la/20230308sac/99e08a25a680c69ab2978d3b426381c50d6b275a42d5b15580dac72338c3248a.png" height="300px" width="200px"/>
+  <img src="https://ac-p2.namu.la/20230308sac/609cef7a9a0cc92d8ef7da786f2264ca4ef0997f6ea7abf423457ca19265b288.png" height="300px" width="400px"/>
+  </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>
+  
   designed for cute girls
   <br> **Alpha-B** has specific face type(smooth which I like), try it!
   <br> (loli:1.5) or more recommended
@@ -10,35 +48,99 @@
   <br> - *01_A3* = AlmondGrapeMix x 0.35 + BACLA-MIX x 0.4 + Coppermix_Gamma x 0.25
   <br> **Alpha Centauri A** = *01_A1* x 0.15 + *01_A2* x 0.25 + *01_A3* x 0.6
   <br> **Alpha Centauri B** = *01_A2* itself
-  <table>
-  <tr>
-    <td><img src="https://ac-p2.namu.la/20230308sac/7c460eddfc1e174b8750605446aab0a8787bba249182f428ecfadf7c8790e9be.png?type=orig" height="300px" width="200px"></td><td><img src="https://ac-p2.namu.la/20230308sac/99e08a25a680c69ab2978d3b426381c50d6b275a42d5b15580dac72338c3248a.png?type=orig" height="300px" width="200px"></td><td><img src="https://ac-p2.namu.la/20230308sac/609cef7a9a0cc92d8ef7da786f2264ca4ef0997f6ea7abf423457ca19265b288.png?type=orig" height="300px" width="400px"></td>
-  </tr>
-  </table>
   
   <br><br>
 
 - ## Beta Centauri
+  
+  <!-- HTML -->
+  <div class="grid-image">
+  <img src="https://ac-p2.namu.la/20230308sac/db9f25d3a1fb5521d53acceed24da64590f7fabeb20721405b86117b6af31bc3.png" height="300px" width="200px"/>
+  <img src="https://ac-p2.namu.la/20230308sac/6789643abefca668b87f9c399768d6ff2e3676fdab19bb31026c435d158560a7.png" height="300px" width="200px"/>
+  <img src="https://ac-p2.namu.la/20230308sac/3c8b082695508a673b6ea2d0229acda4f4df7a0886b452906392defbff559677.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>
+  
   designed for girls little bit older than **Alpha-A**
   <br> has specific face type (kinda sharp, cute when strong loli tag is used)
   <br><br> **Beta Centauri** = 7pa x 0.3 + Counterfeit-v2.5 x 0.4 + *01_A1* x 0.3
   
-  <table>
-  <tr>
-    <td><img src="https://ac-p2.namu.la/20230308sac/db9f25d3a1fb5521d53acceed24da64590f7fabeb20721405b86117b6af31bc3.png?type=orig" height="300px" width="200px"/></td><td><img src="https://ac-p2.namu.la/20230308sac/6789643abefca668b87f9c399768d6ff2e3676fdab19bb31026c435d158560a7.png?type=orig" height="300px" width="200px"/></td><td><img src="https://ac-p2.namu.la/20230308sac/3c8b082695508a673b6ea2d0229acda4f4df7a0886b452906392defbff559677.png?type=orig" height="300px" width="200px"/></td>
-  </tr>
-  </table>
   <br><br>
 
 
 - ## Theta Centauri
+
+  <!-- HTML -->
+  <div class="grid-image">
+  <img src="https://ac-p2.namu.la/20230308sac/1a35d497bd4657e3ba542313578a90846d6c1dab0f08a59f65eb84821f9c497d.png" height="300px" width="200px"/>
+  <img src="https://cdn.discordapp.com/attachments/1047069007733329961/1083073896447754260/03050-2411852086-28-5.5-DPM_2M_Karras.png" height="300px" width="200px"/>
+  <img src="https://ac-p2.namu.la/20230308sac/a7420f456bed6aaf536ccd08e539c1e41742810a6047e66444ed3fd6d250ca21.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>
+  
   designed for girls little bit older than **Alpha-A + (loli:1.5)**, different face type from **Beta**
   <br> EasyNegative Recommended, but not a requirement
   <br><br> **Theta Centauri** = CherryBlossomMix x 0.3 + Anything-v4.5 x 0.3 + reversalSigma x 0.4
-  <table>
-  <tr>
-    <td><img src="https://ac-p2.namu.la/20230308sac/1a35d497bd4657e3ba542313578a90846d6c1dab0f08a59f65eb84821f9c497d.png?type=orig" height="300px" width="200px"/></td><td><img src="https://cdn.discordapp.com/attachments/1047069007733329961/1083073896447754260/03050-2411852086-28-5.5-DPM_2M_Karras.png" height="300px" width="200px"/></td><td><img src="https://ac-p2.namu.la/20230308sac/a7420f456bed6aaf536ccd08e539c1e41742810a6047e66444ed3fd6d250ca21.png?type=orig" height="300px" width="200px"/></td>
-  </tr>
-  </table>
-  
+
+
   <br><br>