Fix search modal styling (#3744)

Search modal has too big margin. It is due to the fact that html element
`section` was styled in `custom.css` file that should style only the
landing page, therefore search modal was styled by mistake.

docs/src/css/custom.css

@@ -264,7 +264,7 @@ header > .container {
   max-width: var(--ifm-container-width);
 }
 
-section > .container {
+.landing-page__section > .container {
   margin-left: 0;
   margin-right: 0;
   padding: 0 60px;
@@ -319,18 +319,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;
 }
@@ -411,7 +411,7 @@ section > .contaner > .row {
     max-width: 1300px;
   }
 
-  section > .container {
+  .landing-page__section > .container {
     max-width: 1300px;
   }
 }
@@ -432,7 +432,7 @@ section > .contaner > .row {
     max-width: 1300px;
   }
 
-  section > .container {
+  .landing-page__section > .container {
     max-width: 1300px;
   }
 
@@ -471,7 +471,7 @@ section > .contaner > .row {
     max-width: 1140px;
   }
 
-  section > .container {
+  .landing-page__section > .container {
     max-width: 1140px;
   }
 }
@@ -502,7 +502,7 @@ section > .contaner > .row {
     max-width: 1300px;
   }
 
-  section > .container {
+  .landing-page__section > .container {
     max-width: 1300px;
   }
 

docs/src/pages/index.js

@@ -123,7 +123,7 @@ function SectionBoxes() {
 
 function BannerSection() {
   return (
-    <section>
+    <section className="landing-page__section">
       <div className="container">
         <div className="row">
           <div
@@ -165,7 +165,7 @@ function Home() {
       <Hero />
 
       <main>
-        <section>
+        <section className="landing-page__section">
           <div className="container">
             <div className="row row--box-section">
               <SectionBoxes />
@@ -174,7 +174,7 @@ function Home() {
           </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">
@@ -214,7 +214,7 @@ function Home() {
             </div>
           </div>
         </section>
-        <section>
+        <section className="landing-page__section">
           <div className="container">
             <div className="row row--center">
               <div className="col col--7 text--center col--bottom-section">