feat(producteur): better responsiveness

1 files changed, 15 insertions, 6 deletions

diff --git a/src/scss/style.scss b/src/scss/style.scss
index a3c4639..bdb052a 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -3,6 +3,11 @@
 $background: hsl(15, 20%, 5%);
 $text: hsl(0, 0%, 100%);
 
+$bp-large: 1200px;
+$bp-mid: 1000px; // video disabled
+$bp-small: 750px;
+$bp-tiny: 500px;
+
 body {
   font-size: 22px;
   background: $background;
@@ -41,8 +46,9 @@ p {
 }
 
 ul {
-  list-style: disc inside;
+  list-style: disc outside;
   margin-top: -0.5rem;
+  margin-left: 1em;
 }
 
 li {
@@ -154,21 +160,23 @@ section[data-scroll] .content {
   background-attachment: fixed;
 
   & .blur {
-    position: absolute;
-    backdrop-filter: blur(50px) brightness(0.8);
-    inset: 0;
+    backdrop-filter: blur(40px) brightness(0.7) saturate(0.8) sepia(0.2);
     display: flex;
     justify-content: center;
-    min-height: 100%;
+    width: 100%;
+    min-height: 100vh;
   }
   & .content {
     padding: 4rem;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     align-items: center;
     justify-items: center;
     min-height: 75vh;
     gap: 4rem;
+    @media only screen and (max-width: $bp-large) {
+      grid-template-columns: 1fr;
+    }
   }
   & .text {
     display: flex;
@@ -178,5 +186,6 @@ section[data-scroll] .content {
   }
   & img {
     box-shadow: 0 0 150px $background;
+    width: 100%;
   }
 }