home big hovers

sass/_font-mixins.scss

@@ -71,6 +71,13 @@
   }
 }
 
+@mixin home-metadata-bevezeto {
+  font: bold 1rem "Butler";
+  @media #{$smalldesktop} {
+    font-size: 2rem;
+  }
+}
+
 @mixin bedocircle {
   font: 900 1rem "Westeinde Caption";
   color: transparent;

sass/base.scss

@@ -103,6 +103,7 @@ $h-unit-1: 5rem;
 
 //vertical units:
 $v-unit-1: 4rem;
+$v-unit-2: 8rem;
 
 /* -------------------------------------------------------------------------- */
 /*                              other mixins                              */
@@ -685,27 +686,30 @@ $v-unit-1: 4rem;
         //big: first 2 articles
         .home-wrapper-big {
           flex: 0 0 auto;
-
+          border-right: #000 1px solid;
           article {
             position: relative;
             width: calc(100vw - (#{$h-unit-2} * 3));
+            height: calc(100vh - #{$v-unit-1});
             margin: 0;
             padding: 0;
             margin-left: $h-unit-2;
-            padding-top: $v-unit-1;
-            border-right: #000 1px solid;
+            margin-top: $v-unit-1;
+            
+            border-top: 1px #000 solid;
 
             /* ------------- home article desktop big - thumbnail and title ------------- */
 
             .thumbnailwrapper {
+              width: 40%;
               height: calc(100% - #{$v-unit-1});
               display: flex;
               flex-direction: row;
               justify-content: flex-start;
-              border-top: 1px #000 solid;
+              
               img.attachment-home-big-thumbnail {
                 object-fit: cover;
-                width: 50%;
+                width: 100%;
                 height: 100%;
               }
             }
@@ -729,7 +733,7 @@ $v-unit-1: 4rem;
               padding: 0;
               justify-content: flex-start;
               align-items: center;
-              @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
+              
               @include home-metadata-big();
               
               @media #{$mobile-landscape} {
@@ -744,6 +748,8 @@ $v-unit-1: 4rem;
                 height: 100%;
                 width: 1px;
                 background-color: #000;
+                flex: 0 0 auto;
+                
               }
 
               .postedon{
@@ -752,7 +758,34 @@ $v-unit-1: 4rem;
 
               .bevezeto,
               .alcim {
+                color: #000 !important;
                 display: none;
+                &.transparent{
+                  color: transparent !important;
+                }
+              }
+
+              .alcim{
+                @include transform(rotate(270deg));
+                transform-origin: top bottom;
+                text-align: left;
+                flex: 0 0 auto;
+                height: $h-unit-1;
+                width: 20rem;
+                margin: 0 -3rem;
+              }
+
+              .bevezeto{
+                width: 50%;
+                flex: 0 1 auto;
+                text-align: left;
+                padding: $h-unit-1;
+                @include home-metadata-bevezeto();
+              }
+
+              .filler{
+                flex: 0 0 auto;
+                width: 40%;
               }
             } //metadata end
 
@@ -765,14 +798,20 @@ $v-unit-1: 4rem;
           }
           &.home-wrapper-1 {
             article {
+              .metadata{
+                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
+              }
               a.thumbnailwrapper {
-                justify-content: flex-end;
+                float: right;
               }
             }
           }
           &.home-wrapper-2 {
             article {
               border-left: #000 1px solid;
+              .metadata{
+                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent);
+              }
               .thumbnailwrapper {
                 img {
                   left: -$h-unit-1;