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

src/assets/sass/buttons.sass

@@ -1,12 +1,15 @@
 
 .btn
     &.btn-immortal
-        background-color: $red
+
+        background-color: $purple
         color: $button-color
         font-size: 24px
         padding: 16px 24px
         gap: 8px
         border-radius: 14px
+        @media (min-width: 992px)
+            background-color: $red
         &:hover,&:focus,&:active
             background-color: lighten($button-background-color, 10%),
             color: darken($button-color, 10%),

src/assets/sass/main.sass

@@ -37,18 +37,12 @@ body
         margin-top: auto
 
 .container
-    padding-right: 15px
-    padding-left: 15px
     margin-right: auto
     margin-left: auto
     @media (min-width: 992px)
         max-width: 800px
-.section-header-container
-    width: 655px
-    text-align: center
-    font-size: 24px
-    margin-top: 64px
-    margin-bottom: 64px
+        padding-right: 15px
+        padding-left: 15px
 
 h1
     font-weight: 700
@@ -57,7 +51,16 @@ h1
     @media (min-width: 992px)
         font-size: 60px
     @media (min-width: 1200px)
-
+h2
+    font-size: 40px
+    font-weight: 200
+    @media (min-width: 992px)
+        font-size: 40px
+h3
+    font-size: 32px
+    font-weight: 200
+    @media (min-width: 992px)
+        font-size: 40px
 .page-head
     margin-bottom: 80px
 .page-body

src/assets/sass/variables.sass

@@ -13,8 +13,9 @@ $black: #0F0F0F
 $grey: #808080
 $red: #8B0000
 $purple: #4B0082
-
+$midnight-black: #0F0F0F
 $darkgrey: #202020
+$grey2: #2D2D2D
 
 $button-color: $white
 $button-background-color: $black
@@ -29,8 +30,11 @@ $button-background-color: $black
     --tertiary-light: #{$tertiary-light}
     --tertiary-dark: #{$tertiary-dark}
     --grey: #{$grey}
+    --grey2: #{$grey2}
     --purple: #{$purple}
     --blood-color: #{$red}
+    --midnight-black: #{$midnight-black}
+    --darkgrey: #{$darkgrey}
 // :root
 //     --font-size-text: 16px
 //     --font-size-title: 32px