Solved readability of the about section.

src/scss/styles.scss

@@ -78,8 +78,6 @@ $primary: $red; // Default: $blue
 }
 
 main {
-  // @extend .mt-0;
-  // @extend .mb-0;
   @extend .pb-4;
   padding-top: 7rem !important;
 }
@@ -89,8 +87,6 @@ body.home main {
 }
 
 main>* {
-  // @extend .mt-0;
-  // @extend .mb-0;
   @extend .pt-4;
   @extend .pb-3;
 }
@@ -133,7 +129,7 @@ h2 {
   @extend .mb-0;
 
   &:not(:first-child) {
-    margin-top: 1.5rem !important;
+    @extend .mt-4;
   }
 }
 
@@ -145,7 +141,7 @@ p {
   @extend .mb-0;
 
   &:not(:first-child) {
-    margin-top: 1rem !important;
+    @extend .mt-3;
   }
 }
 
@@ -223,8 +219,30 @@ body.is-scrolled .navbar {
 
 .row {
   margin-top: unset;
-  --bs-gutter-x: 1.5rem;
-  --bs-gutter-y: 1.5rem;
+  --bs-gutter-y: var(--bs-gutter-x);
+}
+
+img.grayscale-effect {
+  transition: filter 0.2s;
+}
+
+*:not(:hover) img.grayscale-effect {
+  filter: grayscale(80%);
+}
+
+.gradient-to-top-light {
+  position: relative;
+}
+
+.gradient-to-top-light::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to top, transparent 67%, rgba(var(--bs-light-rgb), 1) 100%);
+  z-index: 1;
 }
 
 .parallax,
@@ -242,6 +260,7 @@ body.is-scrolled .navbar {
 }
 
 .card {
+  border: none;
   overflow: hidden;
 }
 
@@ -252,14 +271,6 @@ body.is-scrolled .navbar {
   height: 100%;
 }
 
-img.grayscale-effect {
-  transition: filter 0.2s;
-}
-
-*:not(:hover) img.grayscale-effect {
-  filter: grayscale(80%);
-}
-
 .socials {
   display: flex;
   gap: .5rem;