feat: pure css tilted background

src/components/Home/Meme/Meme.astro

@@ -7,7 +7,7 @@ import meme3 from '../../../assets/meme-3.png';
 import meme4 from '../../../assets/meme-4.png';
 ---
 
-<div id="home-meme">
+<div id="home-meme" class="tilted-bg">
   <div class="meme-text feature-group">
     <h2>TITLE</h2>
     <h3>Building a new world for your data</h3>

src/components/Home/Meme/Meme.scss

@@ -6,8 +6,6 @@
   align-items: center;
   padding: 8% 12%;
   @include fluid-font-size(1.3125rem);
-  background-image: url("../../../assets/tilted-rectangle.webp");
-  background-size: 100% 100%;
 }
 
 .meme-text {

src/components/Home/WhatIsWeb3/WhatIsWeb3.astro

@@ -2,7 +2,7 @@
 import "./WhatIsWeb3.scss";
 ---
 
-<section id="home-whatisweb3">
+<section id="home-whatisweb3" class="tilted-bg">
     <div class="background"></div>
     <div class="feature-group">
         <h2>

src/components/Home/WhatIsWeb3/WhatIsWeb3.scss

@@ -29,12 +29,9 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: relative;
   height: 32.42em;
   margin-top: 2.48em;
   @include fluid-font-size(1.3125rem);
-  background-image: url("../../../assets/tilted-rectangle.webp");
-  background-size: 100% 100%;
 
   .background {
     position: absolute;

src/styles/colors.scss

@@ -1,4 +1,5 @@
 $body-bg: #031418;
+$body-bg-darker: #020d11;
 
 $primary-dark: #000;
 $primary-light: #fff;

src/styles/global.scss

@@ -234,10 +234,11 @@ main.vision {
     justify-content: center;
     padding: 2.95em 1.95em;
     color: var(--white);
-    background: #020e10;
+    background: $body-bg-darker;
     border: 0.05em solid transparent;
     border-radius: 0.5em;
     font-family: var(--font-family-jaldi);
+    transition: border-color 200ms;
 
     &:hover {
       border-color: var(--aquamarine);
@@ -255,4 +256,21 @@ main.vision {
     line-height: 123.81%;
     color: var(--cloud);
   }
-}
+}
+
+.tilted-bg {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -5%;
+    bottom: 0;
+    left: -5%;
+    margin: 2% 0;
+    background: $body-bg-darker;
+    transform: matrix(1, -0.04, 0.04, 1, 0, 0);
+    z-index: -1;
+  }
+}