From e1db876993b7273cb5a7316ab99db629b391ebc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 20 Jun 2022 14:57:09 +0200
Subject: [PATCH] Use linear gradient mask for fading location illustration on
 bottom

---
 src/style/pages/_location.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss
index 86fe012..02e8dbf 100644
--- a/src/style/pages/_location.scss
+++ b/src/style/pages/_location.scss
@@ -166,6 +166,13 @@
         overflow: hidden;
         transform-origin: top center;
 
+        /* Bottom fading gradient for illustration */
+        @include bp (sm) {
+            $mask: linear-gradient(180deg,rgba(0,0,0) 0%,rgb(0,0,0) 70%,rgba(0,0,0,0) 100%);
+            -webkit-mask-image: $mask;
+            mask-image: $mask;
+        }
+
         img {
             display: block;
             width: 100%;