Fixing tile preview

assets/css/main.css

@@ -783,8 +783,9 @@ a.back-to-top:hover, a.back-to-top:focus {
 
 #portfolios .mix {
   padding: 4px;
-	margin: 0px;
+	margin: 4px;
 	height: 200px;
+  background: #dddddd1c;
 }
 
 #portfolios .portfolio-item {
@@ -833,12 +834,12 @@ a.back-to-top:hover, a.back-to-top:focus {
 .shot-item {
   margin-right: 15px;
   border-radius: 4px;
-  background: #ddd;
   position: relative;
 }
 
 .shot-item img {
   width: 100%;
+	background-color: #ddd0;
 }
 
 .shot-item .overlay {
@@ -862,19 +863,19 @@ a.back-to-top:hover, a.back-to-top:focus {
 }
 
 .overlay .icons i {
-  height: 42px;
-  width: 42px;
-  line-height: 42px;
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
   color: #00b4d9;
   left: 50%;
-  margin-left: -24px;
-  margin-top: -24px;
+  margin-left: -16px;
+  margin-top: -9px;
   top: 50%;
   position: absolute;
   z-index: 2;
   cursor: pointer;
   text-align: center;
-  font-size: 20px;
+  font-size: 13px;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;

templates/index.njk

@@ -284,7 +284,7 @@
 								<span class="score-dot {{dotnodot(skill.score,5)}}"></span>
               </div>
 						</div>-->
-						<div class="embed-responsive-1by1 col-xs-3 col-sm-3 col-md-2 col-lg-2 col-xl-2 mix {{ skill.tags }}">
+						<div class="embed-responsive-1by1 col-xs-2 col-sm-2 col-md-1 col-lg-1 col-xl-1 mix {{ skill.tags }}">
               <div class="text-center portfolio-item">
                 <div class="shot-item">
 									<img src="{{ skill.logo }}" alt="" />