Update

2 files changed, 16 insertions, 30 deletions

diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 6fac047..580e70b 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -7,12 +7,13 @@
 
     @include component(namespace()) {
         position: relative;
+        overflow: hidden;
 
         &::before {
             content:          '';
             display:          block;
             padding-top:      12em;
-            padding-bottom:   25%;
+            padding-bottom:   5vw;
             background-color: prop(--colors --bg);
         }
 
@@ -24,6 +25,7 @@
             &:hover {
                 @include element('picture') {
                     opacity: .75;
+                    filter:  blur(0);
                 }
 
                 @include element('card') {
@@ -39,16 +41,18 @@
             }
         }
 
-        @include multi('element' 'picture') {
-            display:          block;
-            position:         absolute;
-            z-index:          10;
-            top:              0;
-            left:             0;
-            width:            100%;
-            height:           100%;
-            object-fit:       cover;
-            object-position:  center center;
+        @include element('picture') {
+            display:         block;
+            position:        absolute;
+            z-index:         10;
+            top:             0;
+            left:            0;
+            width:           100%;
+            height:          100%;
+            object-fit:      cover;
+            object-position: center center;
+            transition:      opacity .2s;
+            mask-image:      iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em);
         }
 
         @include element('card') {
@@ -58,12 +62,7 @@
             bottom:     1em;
             min-width:  15em;
             max-width:  calc(100% - 2em);
-            box-shadow: 0 .3em 1em rgba(#000, .15);
-        }
-
-        @include element('picture') {
-            transition: opacity .2s;
-            mask-image: iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em);
+            box-shadow: 0 .8em 2.5em rgba(#000, .25);
         }
 
         @include media('<=sm') {
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 1bc86fe..1a1bc0b 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -42,18 +42,5 @@
                 border-top:   1px solid prop(--colors --border);
             }
         }
-
-        @include element('banner') {
-            position:        absolute;
-            z-index:         -20;
-            top:             calc(-2 * #{prop(--dims --banner-blur)});
-            left:            calc(-2 * #{prop(--dims --banner-blur)});
-            width:           calc(100% + 4 * #{prop(--dims --banner-blur)});
-            height:          60rem;
-            object-fit:      cover;
-            object-position: top center;
-            filter:          blur(#{prop(--dims --banner-blur)});
-            mask-image:      iro-easing-gradient(linear, to bottom, rgba(#000, .25), ease, transparent);
-        }
     }
 }