download channel fix, added wrapper min width

src/lib/components/atoms/DownloadChannel.svelte

@@ -22,17 +22,18 @@
 
 	button {
 		font-weight: 300;
+		font-size: 1.5rem;
 		height: 60px;
-		width: 43vw;
+		width: 100%;
 		color: var(--white);
 		border-radius: 200px;
 		border: 0;
 		padding: 12px 40px;
 		cursor: pointer;
 		background-color: transparent;
-		font-size: 1.5rem;
 		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 		transition-duration: 0.4s;
+		transition-property: background-color;
 		user-select: none;
 	}
 

src/lib/components/molecules/DownloadChannelHost.svelte

@@ -27,7 +27,8 @@
 		background-color: var(--grey-one);
 		border-radius: 200px;
 		display: flex;
-		justify-content: space-between;
 		padding: 8px 8px;
+        display: grid;
+		grid-template-columns: 1fr 1fr;
 	}
 </style>

src/lib/components/molecules/DownloadSelectorHost.svelte

@@ -7,6 +7,8 @@
     <DownloadSelector></DownloadSelector>
     <DownloadSelector></DownloadSelector>
     <DownloadSelector></DownloadSelector>
+    <DownloadSelector></DownloadSelector>
+    <DownloadSelector></DownloadSelector>
 </div>
 
 

src/routes/__layout.svelte

@@ -30,7 +30,6 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 
 <NavHost></NavHost>
 <slot />
-<SocialHost />
 <Wave />
 
 <style>
@@ -47,7 +46,6 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 	}
 
 	:global(body) {
-		overflow-y: hidden;
 		margin: 0;
 		padding: 0;
 		line-height: 1.3;
@@ -55,8 +53,8 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 	}
 
 	:global(.wrapper) {
-		margin-left: 6%;
-		margin-right: 6%;
+		margin-inline: auto;
+		width: min(90%, 100rem);
 		margin-top: 3%
 	}
 

src/routes/index.svelte

@@ -1,12 +1,14 @@
 <script>
 	import HeroImage from '$lib/components/atoms/HeroImage.svelte';
 	import IndexDescription from '$lib/components/organisms/IndexDescription.svelte';
+	import SocialHost from '$lib/components/molecules/SocialHost.svelte';
 </script>
 
 <div class="wrapper">
 
 	<HeroImage></HeroImage>
 	<IndexDescription />
+	<SocialHost />
 
 </div>