hudozka title style moved to styled jsx

src/components/HudozkaTitle.jsx

@@ -1,8 +1,33 @@
 import React from 'react'
 
 export const HudozkaTitle = () => (
-	<div className="HudozkaTitle">
-		<p>МБУДО</p>
-		<h1>Шлиссельбургская детская художественная школа</h1>
-	</div>
+    <div>
+        <style jsx>{`
+            div {
+                --padding: var(--double-margin) 0;
+
+                padding: var(--padding);
+                text-align: center;
+            }
+
+            p {
+                color: var(--text-color-second);
+                margin-top: var(--single-margin);
+                font-size: var(--font-size-second);
+            }
+
+            h1 {
+                margin-top: var(--single-margin);
+            }
+
+            @media (max-width: var(--mobile-width)) {
+                div {
+                    --padding: 0 0 var(--double-margin);
+                }
+            }
+        `}</style>
+
+        <p>МБУДО</p>
+        <h1>Шлиссельбургская детская художественная школа</h1>
+    </div>
 )

src/style/components/HudozkaTitle.scss

@@ -1,22 +0,0 @@
-.HudozkaTitle {
-  --padding: var(--double-margin) 0;
-
-  padding: var(--padding);
-  text-align: center;
-
-  p {
-    color: var(--text-color-second);
-    margin-top: var(--single-margin);
-    font-size: var(--font-size-second);
-  }
-
-  h1 {
-    margin-top: var(--single-margin);
-  }
-}
-
-@media (max-width: var(--mobile-width)) {
-  .HudozkaTitle {
-    --padding: 0 0 var(--double-margin);
-  }
-}

src/style/style.scss

@@ -28,7 +28,6 @@
 @import "content";
 @import "page-animation";
 @import "main-image";
-@import "components/HudozkaTitle";
 //@import "vertical-image";
 
 @import "schedule-selector";