Solved readability of the about section.

public/index.html

@@ -119,12 +119,14 @@
     </section>
 
     <section class="container-xxl">
-      <div class="card h-100 position-relative overflow-hidden">
-        <img class="card-img position-absolute" src="assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg" alt="Afbeelding van mezelf terwijl ik een FPV drone bestuur.">
-        <div class="card-img-overlay text-dark text-shadow" style="background: rgba(255, 255, 255, 0.6);">
-          <h2 class="section card-title text-center" id="section-about">Over mij</h2>
-          <div class="row">
-            <div class="col-md-6 offset-md-6">
+      <div class="card h-100 bg-light text-dark">
+        <h2 class="section card-title text-center mt-4" id="section-about">Over mij</h2>
+        <div class="row g-0">
+          <div class="col-lg-6 gradient-to-top-light">
+            <img class="card-img" style="object-position: left;" src="assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg" alt="Afbeelding van mezelf terwijl ik een FPV drone bestuur.">
+          </div>
+          <div class="col-lg-6">
+            <div class="card-body">
               <p>
                 Hi, ik ben Bob Vandevliet, gecertificeerd FPV-dronepiloot voor open categorie A1 en A3 (binnenkort ook A2). Ik maak FPV dronevideo's voor bedrijven, vastgoed en (sport)evenementen. Met mijn creatieve en technische achtergrond zorg ik ervoor dat jouw dronevideo er professioneel uitziet en jouw verhaal op een unieke manier verteld wordt.
               </p>

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;