Rewrite banner component to css module

src/components/Discours/Banner.module.scss

@@ -1,4 +1,4 @@
-.discours-banner {
+.discoursBanner {
   background: #f8f8f8;
   margin-bottom: 6.4rem;
   padding: 0.8rem 0 0;
@@ -7,10 +7,6 @@
     font-size: 80%;
   }
 
-  @include media-breakpoint-up(md) {
-    margin-top: -6.4rem;
-  }
-
   h3 {
     font-size: 3.2rem;
     font-weight: 800;
@@ -29,7 +25,7 @@
   }
 }
 
-.discours-banner__content {
+.discoursBannerContent {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -47,7 +43,7 @@
   }
 }
 
-.discours-banner__image {
+.discoursBannerImage {
   align-items: flex-end;
   display: flex;
 }

src/components/Discours/Banner.tsx

@@ -1,12 +1,13 @@
-import './Banner.scss'
+import styles from './Banner.module.scss'
 import { t } from '../../utils/intl'
 import { showModal } from '../../stores/ui'
+import {clsx} from "clsx";
 
 export default () => {
   return (
-    <div class="discours-banner">
+    <div class={styles.discoursBanner}>
       <div class="wide-container row">
-        <div class="discours-banner__content col-lg-5">
+        <div class={clsx(styles.discoursBannerContent, 'col-lg-5')}>
           <h3>{t('Discours is created with our common effort')}</h3>
           <p>
             <a href="/about/help">{t('Support us')}</a>
@@ -16,7 +17,7 @@ export default () => {
             </a>
           </p>
         </div>
-        <div class="col-lg-6 offset-lg-1 discours-banner__image">
+        <div class={clsx(styles.discoursBannerImage, 'col-lg-6 offset-lg-1')}>
           <img src="/discours-banner.jpg" alt={t('Discours')} />
         </div>
       </div>