restruct: updated sass version and rules

src/styles/_dropdown.scss

@@ -0,0 +1,47 @@
+@use 'responsive';
+
+.dropdown-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease;
+  }
+}
+
+.dropdown_background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  z-index: 10;
+}
+
+.dropdown_wrapper {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 0.5em);
+
+  background-color: var(--clr-bg3);
+  // box-shadow: 0 5px 10px 2px #0f0f0f;
+  box-shadow: 0 0 5px 1px var(--clr-primary);
+
+  width: 100%;
+  max-width: 550px;
+
+  padding: 1em;
+  z-index: 100;
+}
+
+@include responsive.smallScreen{
+  .dropdown_wrapper {
+    font-size: 1.1em;
+    max-width: 100%;
+  }
+}