update responsive design

src/assets/sass/base.sass

@@ -1,12 +1,23 @@
 .bloodline-devider
     font-size: 42px
-    margin: 24px 0
     text-align: center
+    margin: 16px 0
+    @media (min-width: 992px)
+        margin: 24px 0
 
 .bloodline-border
-    padding: 24px 32px
-    border: 4px solid #000000
+    padding: 16px
     border-radius: 16px
+    border: 2px solid #000
+    &.bloodline-border--variant1
+        border: 4px solid var(--midnight-black)
+        @media (min-width: 992px)
+            border: 4px solid #000
+    @media (min-width: 992px)
+        padding: 24px 32px
+        border: 4px solid #000
+    &.purple
+        border-color: var(--purple)
 
 .bloodline-badge
     padding: 8px 16px 8px 16px
@@ -30,6 +41,20 @@
     border-color: rgba(var(--v-border-color),var(--v-border-opacity))
     border-style: solid
     border-width: 0
-    border-radius: 4px
+    border-radius: 16px
     box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2),0 1px 1px 0rgba(0, 0, 0, .14),0 1px 3px 0 rgba(0, 0, 0, .12)
     background-color: $darkgrey
+    @media (min-width: 992px)
+        border-radius: 4px
+    &.card--variant1
+        border-radius: 0
+
+.bloodline-token
+    height: 50px
+    width: 50px
+    @media (min-width: 992px)
+        height: auto
+        width: auto
+
+.bloodline-container
+    padding: 0 24px