mobile nav & hero page adjustments

src/routes/__layout.svelte

@@ -58,7 +58,6 @@
 	:global(.wrapper) {
 		margin-inline: auto;
 		width: min(87%, 100rem);
-		margin-top: 1.5%;
 	}
 
 	:root {

src/routes/index.svelte

@@ -7,18 +7,29 @@
 <div class="wrapper">
 	<div class="wrappezoid">
 		<IndexDescription />
-		<HeroImage />
+		<div id="heroimg"><HeroImage /></div>
 	</div>
 	<SocialHost />
 </div>
 
 <style>
 	.wrappezoid {
+		height: calc(100vh - 90px);
 		display: flex;
 		flex-direction: row;
 		justify-content: space-around;
 		align-items: center;
 	}
+	@media (max-width: 1919px) {
+		.wrappezoid {
+			justify-content: space-between;
+		}
+	}
+	@media (max-width: 1052px) {
+		#heroimg {
+			display: none;
+		}
+	}
 	@media (max-width: 768px) {
 		.wrappezoid {
 			flex-direction: column;