Small thumbnails on home

sass/_font-mixins.scss

@@ -25,6 +25,15 @@
   }
 }
 
+@mixin home-title-small {
+  @media #{$smalldesktop} {
+    font-size: 1.2rem;
+    -webkit-text-stroke: #000 1px;
+    color: #fff;
+
+  }
+}
+
 @mixin home-metadata {
   font: bold 1rem "Westeinde Caption";
   color: #000;

sass/base.scss

@@ -310,7 +310,7 @@ $desktop-bottom-margin-double: 4rem;
           // color: #000;
           // fill: currentColor;
           filter: invert(100%); //black
-          @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;
+          @include transform(rotate(180deg)) // transform: rotate(180deg);;
         }
       }
     }
@@ -620,7 +620,7 @@ $desktop-bottom-margin-double: 4rem;
         width: fit-content;
       }
 
-      /* --------------------------- home article mobile -------------------------- */
+      /* --------------------------- home article mobile/default -------------------------- */
 
       article {
         height: 100vh;
@@ -633,19 +633,11 @@ $desktop-bottom-margin-double: 4rem;
           }
 
           .thumbnailwrapper {
-            @media #{$smalldesktop} {
-              // height: 100%;
-              height: calc(100% - #{$desktop-top-margin});
-            }
             img.attachment-home-thumbnail {
               // post thumbnail on home
               height: 50vh;
               width: 100vw;
               object-fit: cover;
-              @media #{$smalldesktop} {
-                width: 50%;
-                height: 100%;
-              }
             }
           }
 
@@ -658,12 +650,6 @@ $desktop-bottom-margin-double: 4rem;
             // display: flex;
             // flex-direction: row;
             // align-items: center;
-            @media #{$smalldesktop} {
-              height: unset;
-              position: absolute;
-              top: 6rem;
-              padding: 4rem;
-            }
 
             a {
               @include home-title();
@@ -695,6 +681,24 @@ $desktop-bottom-margin-double: 4rem;
               width: 100%;
               background: #000;
             }
+
+            /* -------------------------------- thumbnail and title ------------------------------- */
+            .thumbnailwrapper {
+              height: calc(100% - #{$desktop-top-margin});
+              img.attachment-home-thumbnail {
+                object-fit: cover;
+                width: 50%;
+                height: 100%;
+              }
+            }
+
+            h2 {
+              height: unset;
+              position: absolute;
+              top: 6rem;
+              padding: 4rem;
+            }
+
             /* -------------------------- home article metadata big------------------------- */
             .metadata {
               bottom: 0;
@@ -725,7 +729,7 @@ $desktop-bottom-margin-double: 4rem;
               }
               .postedon {
               }
-            }
+            } //metadata end
           }
         }
         .home-wrapper-1 {
@@ -744,17 +748,67 @@ $desktop-bottom-margin-double: 4rem;
       @media #{$smalldesktop} {
         .home-wrapper-small {
           width: calc(100vw - (#{$desktop-home-margin} * 3));
+          height: calc((100vw - (#{$desktop-home-margin} * 3)) / 3 * 2);
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
-          margin-left: $desktop-home-margin;
-          margin-top: $desktop-top-margin;
+          margin: auto 0;
+          &:nth-child(3) {
+            margin-left: $desktop-home-margin;
+          }
 
           article {
-            flex: 0 0 33%;
+            flex: 0 0 calc(100% / 3);
             height: 50%;
-            .metadata{
+            position: relative;
+            .thumbnailwrapper {
+              width: 100%;
+              height: 100%;
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+            }
+
+            .metadata {
+              
+              width: 100%;
+              height: 20%;
+
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              
+              background: transparent;
+
+              display: flex;
+              flex-direction: row;
+              padding: 0;
+              justify-content: flex-end;
+              align-items: stretch;
+              @include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);
               display: none;
+              &.vis{
+                display: flex;
+              }
+            }
+
+            h2,
+            h2 a {
+              @include home-title-small();
+            }
+
+            h2 {
+              display: none;
+              position: absolute;
+              top: 0;
+              background-color: #fff;
+              height: 100%;
+              a {
+                top: 50%;
+                position: absolute;
+              }
             }
           }
         }
@@ -1013,8 +1067,24 @@ $desktop-bottom-margin-double: 4rem;
   }
 
   @media #{$smalldesktop} {
-    h2 a {
-      color: $color !important;
+    &.home-big {
+      h2 a {
+        color: $color !important;
+      }
+    }
+    &.home-small {
+      .metadata,
+      .metadata a {
+        color: #000 !important;
+      }
+    }
+  }
+}
+
+@mixin tagclip($tag){
+  @media #{$smalldesktop} {
+    .thumbnailwrapper>img{
+      clip-path: url(../img/clip/#{$tag}_desktop.svg)
     }
   }
 }
@@ -1036,18 +1106,30 @@ $desktop-bottom-margin-double: 4rem;
 
 .tag-be {
   @include tagcolors(#00ffb8);
+  &.random{
+    @include tagclip(be)
+  }
 }
 
 .tag-do {
   @include tagcolors(#ff5f5f);
+  &.random{
+    @include tagclip(do)
+  }
 }
 
 .tag-think {
   @include tagcolors(#fdff00);
+  &.random{
+    @include tagclip(think)
+  }
 }
 
 .tag-love {
   @include tagcolors(#3c00ff);
+  &.random{
+    @include tagclip(love)
+  }
 }
 
 .single {