Footer update

src/components/Footer/footer.module.css

@@ -0,0 +1,10 @@
+.footer {
+    padding: var(--size-m);
+    color: var(--color-text-opposite);
+    background-color: var(--color-back-opposite);
+    font-size: var(--font-size-second);
+
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+}
+

src/components/Footer/index.tsx

@@ -1,3 +1,6 @@
+import s from './footer.module.css'
+
+import cx from 'classnames'
 import { Copyright } from '../Copyright'
 import { Author } from './Author'
 import { Block } from '../Block'
@@ -9,9 +12,9 @@ export interface IFooterProps {
 }
 
 export const Footer: React.FC<IFooterProps> = props => (
-    <footer className={'opposite'}>
+    <footer className={cx(s.footer, 'opposite')}>
         <Block direction={'vertical'} style={{
-            marginBottom: 'var(--size-m)',
+            marginBottom: 'var(--size-l)',
         }}>
             <Contacts />
         </Block>

src/style/style.css

@@ -77,13 +77,6 @@ body {
     font-family: var(--text-font);
 }
 
-footer {
-    padding: var(--size-m);
-    color: var(--color-text-opposite);
-    background-color: var(--color-back-opposite);
-    font-size: var(--font-size-second);
-}
-
 h1 {
     font-family: var(--title-font);
     text-align: center;