Styling pages WIP

client/src/pages/Home/index.css

@@ -1,3 +1,99 @@
-.container {
-	text-align: left;
+.home-container {
+	padding: 0rem 3rem;
+	margin-bottom: 1rem;
+}
+
+@media (max-width: 768px) {
+	.home-container {
+		padding: 0rem 1rem;
+	}
+}
+
+header {
+  margin: 0 auto;
+  padding: 2.5rem 1.25rem;
+
+  text-align: center;
+}
+
+header h1 {
+  font-size: 3.5rem;
+  font-weight: bold;
+
+  margin-bottom: 1.5rem;
+
+  color: var(--crimson);
+}
+
+header p {
+  font-size: 1.5rem;
+  font-weight: 400;
+
+	margin-bottom: 2.5rem;
+
+  color: var(--white);
+}
+
+header .cta {
+	all: unset;
+	cursor: pointer;
+
+  background: var(--crimson);
+	color: var(--white);
+
+	border-radius: 0.75rem;
+	box-shadow: none;
+
+	padding: 1rem 2rem;
+	font-size: 1.25rem;
+	font-weight: bold;
+
+	text-decoration: none;
+}
+
+.features {
+  margin-top: 2rem;
+  padding: 2.5rem 1.25rem;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  align-items: stretch;
+  gap: 3rem;
+}
+
+.feature, .benefit {
+  padding: 1.5rem;
+
+  border-radius: 0.75rem;
+
+  background: var(--black);
+}
+
+.feature h3, .benefit h3 {
+  font-size: 1.5rem;
+  font-weight: bold;
+
+  margin-bottom: 1rem;
+}
+
+.benefits {
+  margin-top: 2rem;
+  padding: 2.5rem 1.25rem;
+}
+
+.benefits h2 {
+	font-size: 3.5rem;
+  font-weight: bold;
+	text-align: center;
+
+  margin-bottom: 1.5rem;
+
+  color: var(--crimson);
+}
+
+.benefits-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  align-items: stretch;
+  gap: 3rem;
 }