updated title and other layout changes

pages/index.tsx

@@ -27,7 +27,8 @@ const Index: NextPage<Props> = props => (
 
         <HudozkaTitle
             style={{
-                marginBottom: 'var(--size-l)'
+                marginTop: 'var(--size-m)',
+                marginBottom: 'var(--size-m)',
             }}
         />
 

src/components/HudozkaTitle/index.tsx

@@ -1,3 +1,5 @@
+import s from './title.module.css'
+
 import { memo } from 'react'
 
 export type HudozkaTitleProps = {
@@ -5,33 +7,9 @@ export type HudozkaTitleProps = {
 }
 
 export const HudozkaTitle: React.FC<HudozkaTitleProps> = memo(props => (
-    <div style={props.style}>
+    <h1 style={props.style} className={s.title}>
-        <style jsx>{`
+        <span className={s.prefix}>МБУДО</span>
-            div {
+        Шлиссельбургская <br />
-                text-align: center;
+        <span className={s.suffix}>детская художественная школа</span>
-            }
+    </h1>
-
-            h1 span {
-                font-size: var(--font-size-h2);
-            }
-
-            @media (max-width: 31.25em) {
-                div {
-                    --padding: 0 0 2em;
-                }
-            }
-        `}</style>
-
-        <h1>
-            <span style={{
-                display: 'block',
-                marginBottom: 24,
-            }}>МБУДО</span>
-
-            Шлиссельбургская <br />
-            <span>
-                детская художественная школа
-            </span>
-        </h1>
-    </div>
 ))

src/components/HudozkaTitle/title.module.css

@@ -0,0 +1,19 @@
+.title {
+  text-align: center;
+}
+
+.title .suffix {
+  font-size: var(--font-size-h2);
+}
+
+.prefix {
+  font-size: var(--font-size-h2);
+  display: block;
+  margin-bottom: var(--size-s);
+}
+
+@media (max-width: 31.25em) {
+  .title {
+    --padding: 0 0 2em;
+  }
+}