Fixed opacity on about card and sizing of projects

Author: vivian-hafener

_sass/_triple_image.scss

@@ -108,23 +108,27 @@ article.card {
   font-size: em(30);
 }
 
-.card a {
-  &:hover {
-    .card-text {
-      background-color: rgba($black, .86);
-    }
-    .card-meta {
-      &:before {
-        transform: translate(0,0);
-        opacity: 1;
-        @include transition(all 200ms $easeOutQuad);
+@media screen and (min-width: 800px) {
+  .card a {
+    &:hover {
+      .card-text {
+        background-color: rgba($black, .60);
       }
-    }
-    
-    .card-image {
-      transform: translate(20px,0);
-      @include transition(all 400ms $easeOutQuad);
-    }    
-  }  
+      .card-meta {
+        &:before {
+          transform: translate(0,0);
+          opacity: 1;
+          @include transition(all 200ms $easeOutQuad);
+        }
+      }
+      
+      .card-image {
+        transform: translate(20px,0);
+        @include transition(all 400ms $easeOutQuad);
+      }    
+    }  
+  }
 }
 
+
+

assets/css/main.scss

@@ -79,11 +79,6 @@ img.rounded,
     font-weight: 600;
  }
 
-.quad_image {
-  display:grid;
-  grid-template-columns: 25% 25% 25% 25%;
-}
-
 .card-header {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -121,12 +116,28 @@ a.btn {
     margin-bottom: 1em;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 570px) {
   .quad_image {
     display: block;
   }
 }
 
+@media screen and (min-width: 571px) {
+  .quad_image {
+    display:grid;
+    grid-template-columns: 50% 50%;
+  }
+}
+
+@media screen and (min-width: 1100px) {
+  .quad_image {
+    display:grid;
+    grid-template-columns: 25% 25% 25% 25%;
+  }  
+}
+
+
+
 @import "typography";
 @import "nav";
 @import "slider";