restruct: updated sass version and rules

src/styles/_card.scss

@@ -0,0 +1,52 @@
+@use 'responsive';
+
+.card-dimmer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  z-index: 100;
+
+  background: rgba(black, 0.65);
+}
+
+.card {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 100;
+
+  transform: translate(-50%, -50%);
+
+  overflow: hidden;
+  background: #202020e8;
+
+  box-shadow: 0 0 15px 0 black;
+  border: 1px solid #202020e8;
+
+  width: 95%;
+  max-width: 700px;
+
+  max-height: 95vh;
+
+  &-exit {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.5em 0.5em;
+
+    img {
+      width: 2em;
+    }
+
+    cursor: pointer;
+  }
+}
+
+@include responsive.smallScreen{
+  .card {
+    max-height: 85vh;
+  }
+}