new coins + chart swiper

src/components/SacrificeToken.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="sacrifice-wrapper card bloodline-wrapper">
+	<div class="sacrifice-wrapper bloodline-wrapper">
 		<!-- {{ activeToken.allowance }} -->
 		<div class="sacrifice-inner">
 			<div class="sacrifice-headline">Select Sacrifice</div>
@@ -201,8 +201,9 @@ async function addTokens(value) {
     margin-left: auto
     margin-right: auto
     background-color: var(--primary)
+    padding: 24px
+    align-items: center
     .sacrifice-inner
-        padding: 24px
         @media (min-width: 992px)
             padding: 48px 64px
         .sacrifice-headline
@@ -217,7 +218,9 @@ async function addTokens(value) {
         .sacrifice-tokens
             display: flex
             width: 100%
-            justify-content: space-between
+            justify-content: center
+            flex-wrap: wrap
+            gap: 12px
             @media (min-width: 992px)
                 justify-content: space-evenly
 
@@ -238,9 +241,9 @@ async function addTokens(value) {
                     border-color: var(--purple)
 
                 .sacrifice-token-name
-                    padding: 5px 26px
                     font-size: 16px
                     @media (min-width: 992px)
+                        padding: 5px 26px
                         font-size: 24px
 
         .sacrifice-buttons-function-wrapper