kazimir styles -> to css

pages/_app.tsx

@@ -1,4 +1,6 @@
 import 'src/style.css'
+import 'src/style/kazimir/image.css'
+import 'src/style/kazimir/video.css'
 import 'src/style/style.scss'
 
 import App from 'next/app'

src/style/kazimir/image.css

@@ -1,24 +1,25 @@
 .kazimir__image {
-  --kazimir-caption-margin: 20px;
+    --kazimir-caption-margin: 20px;
+}
 
-  p {
+.kazimir__image p {
     margin-left: 0;
     margin-right: 0;
-  }
+}
 
-  img {
+.kazimir__image img {
     border-radius: 3px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
 
     max-width: 100%;
     max-height: 35em;
-  }
+}
 
-  figure {
+.kazimir__image figure {
     margin: 0 0 var(--single-margin);
-  }
+}
 
-  figcaption {
+.kazimir__image figcaption {
     margin-left: var(--kazimir-caption-margin);
 
     font-size: 16px;
@@ -26,11 +27,10 @@
     color: #999;
 
     font-weight: 100;
-  }
 }
 
 @media screen and (max-width: var(--mobile-width)) {
-  .kazimir__image {
+    .kazimir__image {
-    --kazimir-caption-margin: 10px;
+        --kazimir-caption-margin: 10px;
-  }
+    }
 }

src/style/kazimir/video.css

@@ -0,0 +1,14 @@
+.kazimir__video {
+    width: 100%;
+    height: 0;
+    position: relative;
+    padding-bottom: var(--embed-video-ratio);
+
+    margin-bottom: var(--single-margin);
+}
+
+.kazimir__video iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}

src/style/kazimir/video.scss

@@ -1,14 +0,0 @@
-.kazimir__video {
-  width: 100%;
-  height: 0;
-  position: relative;
-  padding-bottom: var(--embed-video-ratio);
-
-  margin-bottom: var(--single-margin);
-
-  iframe {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-}

src/style/style.scss

@@ -16,6 +16,3 @@
 @import "themes/theme-default";
 
 @import "marker/MarkerTable";
-
-@import "kazimir/video";
-@import "kazimir/image";