activated lightbox on cards, started to dev modal-card

web/themes/custom/materiotheme/assets/styles/base/_variables.scss

@@ -12,3 +12,6 @@ $card_height: 295px;
 
 $minicard_width: 170px;
 $minicard_height: 100px;
+
+$modalcard_width: 850px;
+$modalcard_height: 610px;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -829,6 +829,7 @@ article.card{
     position: relative;
     &, *{width: 100%; height:100%;}
     figure{
+      cursor: pointer;
       margin:0;
       position: absolute;
       top:0; left:0;
@@ -836,6 +837,10 @@ article.card{
       &:first-of-type{
         z-index:5
       }
+      transition: opacity 0.2s ease-in-out;
+      &.show{opacity: 1; z-index:6;}
+      &.hide{opacity: 0;}
+
       img{
         // width: 100%; height:100%;
         &.blank{
@@ -846,6 +851,28 @@ article.card{
       }
     }
   }
+  // overwritnig card for card-medium (aka search-card)
+  &.search-card{
+    >header{
+      cursor: pointer;
+    }
+  }
+  // overwriting card for modal-card
+  &.modal-card{
+    display: flex;
+    flex-flow: row-reverse nowrap;
+    width: $modalcard_width;
+    height: $modalcard_height;
+    >.col{
+      flex-basis: 50%;
+    }
+    section.col-right{
+      header{
+        position: relative;
+        bottom: auto;
+      }
+    }
+  }
 }