ADDED: drizzle run to goodies

Author: vitalii-staryk

src/components/layout/AsidePosts.astro

@@ -160,6 +160,43 @@
       >
     </div>
   </a>
+  <a href="https://drizzle.run" class="aside-posts__wrap">
+    <div class="aside-posts__image">
+      <div class="aside-posts__image--learn">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+        >
+          <path
+            class="play-path"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5" d="M6.906 4.537A.6.6 0 0 0 6 5.053v13.894a.6.6 0 0 0 .906.516l11.723-6.947a.6.6 0 0 0 0-1.032L6.906 4.537Z"
+          ></path>
+        </svg>
+      </div>
+    </div>
+    <div class="aside-posts__text">Drizzle Run</div>
+    <div class="aside-posts__arrow-right">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-arrow-right"
+      ><line x1="5" y1="12" x2="19" y2="12"></line><polyline
+        points="12 5 19 12 12 19"></polyline></svg
+      >
+    </div>
+  </a>
   <div class="goods__wrap">
     <div class="goods__text">Our goodies!</div>
   </div>
@@ -184,6 +221,7 @@
   .aside-posts__container:hover .aside-posts__wrap .aside-posts__image {
       margin-left: 12px;
       transform: scale(1);
+      opacity: 1;
   }
 
   .aside-posts__container:hover .aside-posts__wrap .aside-posts__text {
@@ -257,6 +295,10 @@
       margin-top: -41px;
   }
 
+  .aside-posts__wrap:nth-child(5) {
+      margin-top: -41px;
+  }
+
   .aside-posts__wrap:nth-child(2) .aside-posts__image  {
       margin-left: 32px;
   }
@@ -269,6 +311,11 @@
       margin-left: 80px;
   }
 
+  .aside-posts__wrap:nth-child(5) .aside-posts__image {
+      margin-left: 80px;
+      opacity: 0;
+  }
+
 
   .aside-posts__wrap:hover {
     background-color: #eff0f3;
@@ -301,7 +348,7 @@
     margin: 12px 8px 12px 12px;
     position: relative;
       z-index: 6;
-      transition: margin-left 0.15s, transform 0.15s;
+      transition: margin-left 0.15s, transform 0.15s, opacity 0.15s;
       transform: scale(0.8);
   }
 
@@ -354,6 +401,14 @@
     width: 16px;
     color: #000;
   }
+
+  .play-path {
+      fill: #c4c4c4;
+  }
+
+  html.dark .play-path {
+      fill: #333333;
+  }
 </style>
 
 <style is:global>