Fix search modal styling in the docs (#2309)

## Description

This PR applies the same changes as
software-mansion/react-native-reanimated#3744,
thanks @blazejkustra!

Before:
<img width="569" alt="Screenshot 2022-11-07 at 09 18 06"
src="https://user-images.githubusercontent.com/21055725/200260032-65bb1b5d-4b7f-4c21-a914-6ebf434d0cf9.png">

After:
<img width="569" alt="Screenshot 2022-11-07 at 09 17 40"
src="https://user-images.githubusercontent.com/21055725/200260056-648c39bb-6fb7-46bc-b04c-65a98c002d3e.png">

docs/src/css/custom.css

@@ -266,7 +266,7 @@ header > .container {
   max-width: var(--ifm-container-width);
 }
 
-section > .container {
+.landing-page__section > .container {
   margin-left: 0;
   margin-right: 0;
   padding: 0 60px;
@@ -321,18 +321,18 @@ section > .container {
   background-repeat: no-repeat;
 }
 
-section {
+.landing-page__section {
   display: flex;
   justify-content: center;
   padding: 3rem 0;
   background-color: var(--swm-color-bright);
 }
 
-section:nth-child(2) {
+.landing-page__section:nth-child(2) {
   background-color: var(--ifm-color-white);
 }
 
-section > .contaner > .row {
+.landing-page__section > .contaner > .row {
   display: flex;
   align-items: flex-start;
 }
@@ -413,7 +413,7 @@ section > .contaner > .row {
     max-width: 1300px;
   }
 
-  section > .container {
+  .landing-page__section > .container {
     max-width: 1300px;
   }
 }
@@ -434,7 +434,7 @@ section > .contaner > .row {
     max-width: 1300px;
   }
 
-  section > .container {
+  .landing-page__section > .container {
     max-width: 1300px;
   }
 
@@ -473,7 +473,7 @@ section > .contaner > .row {
     max-width: 1140px;
   }
 
-  section > .container {
+  .landing-page__section > .container {
     max-width: 1140px;
   }
 }
@@ -504,7 +504,7 @@ section > .contaner > .row {
     max-width: 1300px;
   }
 
-  section > .container {
+  .landing-page__section > .container {
     max-width: 1300px;
   }
 

docs/src/pages/index.js

@@ -137,7 +137,7 @@ function SectionBoxes() {
 
 function BannerSection() {
   return (
-    <section>
+    <section className="landing-page__section">
       <div className="container">
         <div className="row">
           <div
@@ -180,15 +180,15 @@ function Home() {
       <Hero />
 
       <main>
-        <section>
+        <section className="landing-page__section">
           <div className="container">
             <div className="row row--box-section">
               <SectionBoxes />
             </div>
           </div>
         </section>
         {/* <BannerSection /> */}
-        <section>
+        <section className="landing-page__section">
           <div className="container container--center">
             <div className="row row--center">
               <div className="col col--7 text--center col--bottom-section">