update responsive design

src/components/BloodChart.vue

@@ -2,7 +2,9 @@
 	<div class="blood-chart-wrapper">
 		<div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name">
 			<div class="blood-chart-element-header">
-				<div class="blood-chart-coin"></div>
+				<div class="blood-chart-coin">
+					<img :src="getImageUrl(coin.icon)" alt="logo" />
+				</div>
 				<div class="blood-chart-coin-title">{{ coin.name }}</div>
 			</div>
 			<div class="blood-chart-element-body">
@@ -50,18 +52,25 @@
 </template>
 
 <script setup>
+function getImageUrl(url) {
+	return new URL(url, import.meta.url).href;
+}
+
 const dataPoints = [
 	{
-		name: "PEPE",
+		name: "$PEPE",
 		percentage: 62.2,
+		icon: "/src/assets/img/token/pepevamp.png",
 	},
 	{
-		name: "Shiba",
+		name: "$SHIB",
 		percentage: 31.2,
+		icon: "/src/assets/img/token/shibvamp.png",
 	},
 	{
-		name: "Doge",
+		name: "$ELON",
 		percentage: 54.5,
+		icon: "/src/assets/img/token/elonvamp.png",
 	},
 ];
 </script>
@@ -69,8 +78,14 @@ const dataPoints = [
 <style lang="sass">
 .blood-chart-wrapper
     height: 750px
+    width: 100%
+    justify-content: space-around
     display: inline-flex
-    gap: 96px
+    @media (min-width: 992px)
+        gap: 96px
+        width: unset
+        justify-content: unset
+
     .blood-chart-element
         height: 100%
         width: 80px
@@ -82,19 +97,22 @@ const dataPoints = [
                 height: 80px
                 width: 80px
                 border-radius: 80px
-                background-color: grey
                 margin-left: auto
                 margin-right: auto
                 position: relative
                 margin-bottom: 16px
+                overflow: hidden
             .blood-chart-coin-title
                 text-align: center
                 margin-bottom: 32px
-                font-size: 24px
+                font-size: 16px
+                @media (min-width: 992px)
+                    font-size: 24px
         .blood-chart-element-body
             background-color: rgba(233, 233, 233, 0.2)
             flex: 1 1 auto
             border-radius: 8px 8px 40px 40px
+            text-align: left
             .blood-chart-bar-wrapper
                 height: 100%
                 display: flex
@@ -103,14 +121,14 @@ const dataPoints = [
                     margin-top: auto
                     background-color: var(--blood-color)
                     position: relative
-                    border-radius: 8px 8px 40px 40px
+                    border-radius: 0 0 40px 40px
                     .blood-chart-bar-percentage
                         font-size: 14px
                         text-align: center
                         margin-top: 16px
                     .waves
                         position: absolute
-                        top: -8px
+                        top: -10px
                         width: 100%
                         height: 10px
         .blood-chart-element-footer