2 files changed, 22 insertions, 6 deletions

diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 09dc062..62a7118 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -21,6 +21,19 @@
             background-image: linear-gradient(340deg, rgba(#000, .25) 5em, transparent 18em);
         }
 
+        &:link,
+        &:visited {
+            &:hover {
+                @include element('picture') {
+                    opacity: .75;
+                }
+
+                @include element('card') {
+                    transform: translateY(-1em);
+                }
+            }
+        }
+
         @include multi('element' 'picture', '&::after') {
             display:          block;
             position:         absolute;
@@ -39,18 +52,21 @@
             right:      1em;
             bottom:     1em;
             min-width:  15em;
+            max-width:  calc(100% - 2em);
+            transform:  translateY(0);
+            transition: transform .2s;
             box-shadow: 0 .3em 1em rgba(#000, .25);
         }
 
+        @include element('picture') {
+            transition: opacity .2s;
+            opacity:    1;
+        }
+
         @include media('<=sm') {
             &::after {
                 background-image: linear-gradient(to top, rgba(#000, .25) 1em, transparent 11em);
             }
-
-            @include element('card') {
-                width:     calc(100% - 2em);
-                min-width: 0;
-            }
         }
     }
 }
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss
index 612d857..7c67663 100644
--- a/assets/css/layouts/_project-grid.scss
+++ b/assets/css/layouts/_project-grid.scss
@@ -1,7 +1,7 @@
 @include namespace('project-grid') {
     @include store((
         --dims: (
-            --col-width: 26em
+            --col-width: 20em
         )
     ));