Add mobile background and fix regular background (#159)

* add mobile background and fix regular background

* remove clamp

apps/site/src/app/(home)/sections/Landing/Landing.module.scss

@@ -1,15 +1,25 @@
+@use "bootstrap-utils" as bootstrap;
+
 .landing {
-	padding-top: 121.27%;
-	background-image: url("~@/assets/background/ocean-sand-background.svg");
+	padding-top: 216.82%;
+	background-image: url("~@/assets/background/ocean-sand-mobile-background.svg");
 	background-size: cover;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-
 	text-align: center;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		padding-top: 121.27%;
+		background-image: url("~@/assets/background/ocean-sand-background.svg");
+	}
 }
 
 .title {
-	margin-top: -190%;
+	margin-top: -355%;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		margin-top: -190%;
+	}
 }

apps/site/src/app/(home)/sections/Landing/Title.module.scss

@@ -1,4 +1,11 @@
+@use "bootstrap-utils" as bootstrap;
+
 .title {
-	width: clamp(0px, 40vw, 40vw);
-	height: clamp(0px, 14.53vw, 14.53vw);
+	width: 70vw;
+	height: 25.42vw;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		width: 40vw;
+		height: 14.53vw;
+	}
 }

apps/site/src/lib/styles/globals.scss

@@ -3,7 +3,11 @@
 $container-padding: 8rem;
 
 .background {
-	background: linear-gradient(#009de9 50%, #00a6c4 60%);
+	background: linear-gradient(#01a6c4, #01a7c5 67%, #00c1a9 82%, #8dbd9e);
+
+	@media screen and (min-height: 600px) {
+		background: #01a6c4;
+	}
 }
 
 .accordion {