Website responsive resizing improvements

website/sass/index.scss

@@ -1,25 +1,40 @@
 #logo {
 	display: flex;
+	
+	img {
+		width: auto;
+		max-width: 100%;
+		max-height: 240px;
+	}
+}
 
-	svg {
-		display: block;
-		height: auto;
+.pencil-texture {
+	position: absolute;
+	--remaining-width-to-full: calc(var(--max-width-plus-padding) - min(calc(100vw - 100px), var(--max-width-plus-padding)));
+	left: Max(calc(-1 * var(--remaining-width-to-full)), -50px);
+	width: 100px;
+	mix-blend-mode: multiply;
+
+	@media screen and (max-width: 1000px) {
+		width: 40px;
+		top: 400px;
+		left: -10px;
 	}
 }
 
 #quick-links {
 	margin-bottom: calc(120 * var(--variable-px));
 	display: flex;
-	gap: 20px;
+	gap: calc(var(--font-size-link) * 0.8);
 	flex-wrap: wrap;
 }
 
-.pencil-texture {
-	position: absolute;
-	--remaining-width-to-full: calc(var(--max-width-plus-padding) - min(calc(100vw - 100px), var(--max-width-plus-padding)));
-	left: Max(calc(-1 * var(--remaining-width-to-full)), -40px);
-	width: 100px;
-	mix-blend-mode: multiply;
+#hero-message {
+	@media screen and (max-width: 1400px) {
+		p {
+			max-width: unset !important;
+		}
+	}
 }
 
 .hexagons {
@@ -196,6 +211,13 @@
 			margin-right: auto;
 		}
 	}
+
+	// 1600px is var(--max-width)
+	@media screen and (max-width: 1600px) {
+		.carousel.torn {
+			display: none;
+		}
+	}
 }
 
 #upcoming-tech {
@@ -209,6 +231,7 @@
 
 #community {
 	#newsletter form {
+		width: 100%;
 		margin-top: 40px;
 		display: flex;
 		gap: 20px;
@@ -238,6 +261,11 @@
 			&.name {
 				flex: 1 0 0;
 				min-width: 240px;
+				
+			}
+
+			&.phone {
+				display: none;
 			}
 
 			&.email {
@@ -245,6 +273,13 @@
 				min-width: 240px;
 			}
 
+			@media screen and (max-width: 400px) {
+				&.name,
+				&.email {
+					min-width: 100%;
+				}
+			}
+
 			&.submit {
 				flex: 1 0 0;
 			}
@@ -255,7 +290,7 @@
 			}
 
 			label {
-				font-size: 24px;
+				font-size: var(--font-size-link);
 				font-weight: 800;
 				margin-bottom: 10px;
 				line-height: 1;
@@ -264,13 +299,13 @@
 			input:not([type="submit"]) {
 				flex: 0 0 auto;
 				width: 100%;
-				height: 48px;
-				font-size: 22px;
+				height: calc(var(--font-size-link) * 2);
+				font-size: calc(var(--font-size-link) * 0.9);
 				color: inherit;
 				border: 2px solid currentColor;
 				outline: none;
 				margin: 0;
-				padding: 0 24px;
+				padding: 0 var(--font-size-link);
 				font-family: inherit;
 				font-weight: inherit;
 				box-sizing: border-box;
@@ -308,6 +343,11 @@
 				text-decoration: none;
 				display: flex;
 
+				img {
+					width: 48px;
+					height: 48px;
+				}
+				
 				span {
 					line-height: 48px;
 					margin-left: 20px;