homepage more content

57 files changed, 148 insertions, 8 deletions

diff --git a/assets/.DS_Store b/assets/.DS_Store
index 60c38ed..c65d688 100644
--- a/assets/.DS_Store
+++ b/assets/.DS_Store
diff --git a/assets/fonts/Inter/static/Inter_18pt-Black.ttf b/assets/fonts/Inter/static/Inter_18pt-Black.ttf
deleted file mode 100644
index 89673de..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-Black.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-BlackItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-BlackItalic.ttf
deleted file mode 100644
index b33602f..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-BlackItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-Bold.ttf b/assets/fonts/Inter/static/Inter_18pt-Bold.ttf
deleted file mode 100644
index cd13f60..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-Bold.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-BoldItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-BoldItalic.ttf
deleted file mode 100644
index 0d19c1a..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-BoldItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-ExtraBold.ttf b/assets/fonts/Inter/static/Inter_18pt-ExtraBold.ttf
deleted file mode 100644
index e71c601..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-ExtraBold.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf
deleted file mode 100644
index df45062..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-ExtraLight.ttf b/assets/fonts/Inter/static/Inter_18pt-ExtraLight.ttf
deleted file mode 100644
index f9c6cfc..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-ExtraLight.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf
deleted file mode 100644
index 275f305..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-Italic.ttf b/assets/fonts/Inter/static/Inter_18pt-Italic.ttf
deleted file mode 100644
index 14d3595..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-Italic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-Light.ttf b/assets/fonts/Inter/static/Inter_18pt-Light.ttf
deleted file mode 100644
index acae361..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-Light.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-LightItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-LightItalic.ttf
deleted file mode 100644
index f69e18b..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-LightItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-Medium.ttf b/assets/fonts/Inter/static/Inter_18pt-Medium.ttf
deleted file mode 100644
index 71d9017..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-Medium.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-MediumItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-MediumItalic.ttf
deleted file mode 100644
index 5c8c8b1..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-MediumItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-Regular.ttf b/assets/fonts/Inter/static/Inter_18pt-Regular.ttf
deleted file mode 100644
index ce097c8..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-Regular.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf b/assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf
deleted file mode 100644
index 053185e..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf
deleted file mode 100644
index d9c9896..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-Thin.ttf b/assets/fonts/Inter/static/Inter_18pt-Thin.ttf
deleted file mode 100644
index e68ec47..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-Thin.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_18pt-ThinItalic.ttf b/assets/fonts/Inter/static/Inter_18pt-ThinItalic.ttf
deleted file mode 100644
index 134e837..0000000
--- a/assets/fonts/Inter/static/Inter_18pt-ThinItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-Black.ttf b/assets/fonts/Inter/static/Inter_24pt-Black.ttf
deleted file mode 100644
index dbb1b3b..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-Black.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-BlackItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-BlackItalic.ttf
deleted file mode 100644
index b89d61c..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-BlackItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-Bold.ttf b/assets/fonts/Inter/static/Inter_24pt-Bold.ttf
deleted file mode 100644
index 46b3583..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-Bold.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-BoldItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-BoldItalic.ttf
deleted file mode 100644
index d1c0f53..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-BoldItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-ExtraBold.ttf b/assets/fonts/Inter/static/Inter_24pt-ExtraBold.ttf
deleted file mode 100644
index b775c08..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-ExtraBold.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf
deleted file mode 100644
index 3461a92..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-ExtraLight.ttf b/assets/fonts/Inter/static/Inter_24pt-ExtraLight.ttf
deleted file mode 100644
index 2ec6ca3..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-ExtraLight.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf
deleted file mode 100644
index c634a5d..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-Italic.ttf b/assets/fonts/Inter/static/Inter_24pt-Italic.ttf
deleted file mode 100644
index 1048b07..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-Italic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-Light.ttf b/assets/fonts/Inter/static/Inter_24pt-Light.ttf
deleted file mode 100644
index 1a2a6f2..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-Light.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-LightItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-LightItalic.ttf
deleted file mode 100644
index ded5a75..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-LightItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-Medium.ttf b/assets/fonts/Inter/static/Inter_24pt-Medium.ttf
deleted file mode 100644
index 5c88739..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-Medium.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-MediumItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-MediumItalic.ttf
deleted file mode 100644
index be091b1..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-MediumItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-Regular.ttf b/assets/fonts/Inter/static/Inter_24pt-Regular.ttf
deleted file mode 100644
index 6b088a7..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-Regular.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-SemiBold.ttf b/assets/fonts/Inter/static/Inter_24pt-SemiBold.ttf
deleted file mode 100644
index ceb8576..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-SemiBold.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf
deleted file mode 100644
index 6921df2..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-Thin.ttf b/assets/fonts/Inter/static/Inter_24pt-Thin.ttf
deleted file mode 100644
index 3505b35..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-Thin.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_24pt-ThinItalic.ttf b/assets/fonts/Inter/static/Inter_24pt-ThinItalic.ttf
deleted file mode 100644
index a3e6feb..0000000
--- a/assets/fonts/Inter/static/Inter_24pt-ThinItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-Black.ttf b/assets/fonts/Inter/static/Inter_28pt-Black.ttf
deleted file mode 100644
index 66a252f..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-Black.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-BlackItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-BlackItalic.ttf
deleted file mode 100644
index 3c8fdf9..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-BlackItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-Bold.ttf b/assets/fonts/Inter/static/Inter_28pt-Bold.ttf
deleted file mode 100644
index d17828b..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-Bold.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-BoldItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-BoldItalic.ttf
deleted file mode 100644
index 6fce50a..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-BoldItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-ExtraBold.ttf b/assets/fonts/Inter/static/Inter_28pt-ExtraBold.ttf
deleted file mode 100644
index 6d87cae..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-ExtraBold.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf
deleted file mode 100644
index 1a56735..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-ExtraLight.ttf b/assets/fonts/Inter/static/Inter_28pt-ExtraLight.ttf
deleted file mode 100644
index d42b3f5..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-ExtraLight.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf
deleted file mode 100644
index 90e2f20..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-Italic.ttf b/assets/fonts/Inter/static/Inter_28pt-Italic.ttf
deleted file mode 100644
index c2a143a..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-Italic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-Light.ttf b/assets/fonts/Inter/static/Inter_28pt-Light.ttf
deleted file mode 100644
index 5eeff3a..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-Light.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-LightItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-LightItalic.ttf
deleted file mode 100644
index 6b90b76..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-LightItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-Medium.ttf b/assets/fonts/Inter/static/Inter_28pt-Medium.ttf
deleted file mode 100644
index 00120fe..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-Medium.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-MediumItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-MediumItalic.ttf
deleted file mode 100644
index 7481e7b..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-MediumItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-Regular.ttf b/assets/fonts/Inter/static/Inter_28pt-Regular.ttf
deleted file mode 100644
index 855b6f4..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-Regular.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-SemiBold.ttf b/assets/fonts/Inter/static/Inter_28pt-SemiBold.ttf
deleted file mode 100644
index 8b84efc..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-SemiBold.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf
deleted file mode 100644
index 2e22c5a..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-Thin.ttf b/assets/fonts/Inter/static/Inter_28pt-Thin.ttf
deleted file mode 100644
index 94e6108..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-Thin.ttf
+++ /dev/null
diff --git a/assets/fonts/Inter/static/Inter_28pt-ThinItalic.ttf b/assets/fonts/Inter/static/Inter_28pt-ThinItalic.ttf
deleted file mode 100644
index d3d44cd..0000000
--- a/assets/fonts/Inter/static/Inter_28pt-ThinItalic.ttf
+++ /dev/null
diff --git a/index.html b/index.html
index 1a2cacc..bea4084 100644
--- a/index.html
+++ b/index.html
@@ -3,15 +3,19 @@
 <head>
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="viewport" content="width=device-width, initial-scale=0.7">
 	<title>ECOEASE Exfoliants</title>
 	<link rel="stylesheet" href="/style.css">
 </head>
 <body>
 	<div class="navbar">
-		<img src="/assets/images/master.png" alt="" class="navbar-icon">
+		<a href=""><img src="/assets/images/master.png" alt="" class="navbar-icon"></a>
 		<div class="navbar-links">
-			<a class="navbar-link" href=""></a>
+			<a class="navbar-link" href="">Project Information</a>
+			•
+			<a class="navbar-link" href="">Our Goal</a>
+			•
+			<a class="navbar-link" href="">Products</a>
 		</div>
 	</div>
 	<div class="main">
@@ -23,13 +27,30 @@
 		</section>
 		<section class="section-text">
 			<div class="elipse"></div>
-			<h1 style="display: flex; justify-content: center;"><span style="max-width: 750px; display: block;"><b class="text-accent-brand">Sustainable</b> and <b class="text-accent-brand">organic</b> skincare products that helps your skin.</span></h1>
+			<h1 class="section-heading"><span class="section-heading-child"><b class="text-accent-brand">Sustainable</b> and <b class="text-accent-brand">affordable</b> skincare products that helps your skin.</span></h1>
 		</section>
 		<section>
-
+			<h2>Our products are...</h1>
+			<div id="bento0">
+				<div id="a0" class="bento-tile-accent">
+					<h2 class="bento-heading">Always made with <b class="text-accent-brand">Green & Organic</b> materials.</h2>
+				</div>
+				<div id="b0" class="bento-tile">
+					<h2 class="bento-heading">Make your skin say <b class="text-accent-brand">Thank You</b>.</h2>
+				</div>
+				<div id="c0" class="bento-tile">
+					<h2 class="bento-heading"><b class="text-accent-brand">Sustainable</b> Production</h2>
+					<a class="button" href="">Learn more &rarr;</a>
+				</div>
+			</div>
+		</section>
+		<section class="section-text">
+			<h1 class="section-heading"><span class="section-heading-child">🥁 Introducing...<br><b class="text-accent-brand">Asheville Lip Scrub</b>!</span></h1>
 		</section>
 		<section>
+			<div id="bento1">
 
+			</div>
 		</section>
 	</div>
 </body>
diff --git a/style.css b/style.css
index 4da737e..1e3e790 100644
--- a/style.css
+++ b/style.css
@@ -10,6 +10,7 @@
 
 :root {
 	--background: white;
+	--foreground: #415400;
 	--background-accented: #F9F8F2;
 	--radius: 50px;
 	--brand-fg-dark: #6A6932;
@@ -23,6 +24,7 @@ body {
 	display: grid;
 	place-items: center;
 	font-family: "Inter", sans-serif;
+	color: var(--foreground);
 }
 
 section {
@@ -38,6 +40,12 @@ h1 {
 	color: rgba(0, 0, 0, .7);
 }
 
+h2 {
+	font-size: 36px;
+	font-weight: 400;
+	color: rgba(0, 0, 0, .6);
+}
+
 .main {
 	max-width: 1400px;
 	width: 100%;
@@ -62,8 +70,10 @@ h1 {
 	box-sizing: border-box;
 	box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);
 	padding: 25px;
+	padding-right: 40px;
 	padding-top: 15px;
 	margin: 25px;
+	display: flex;
 }
 
 .navbar-icon {
@@ -73,18 +83,39 @@ h1 {
 
 .navbar-links {
 	width: 100%;
-	display: flexbox;
-	justify-items: right;
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: center;
+	color: var(--brand-fg-light);
+	gap: 5px;
 }
 
 .navbar-link {
+	text-decoration: none;
+	color: var(--foreground);
+	background-color: transparent;
+	padding: 10px;
+	border: 1px solid transparent;
+	box-sizing: border-box;
+	border-radius: 15px;
+	transition: all .2s;
+}
+
+.navbar-link:hover {
+	background: var(--brand-bg-light);
+}
+
+.navbar-link:active {
+	background: var(--brand-bg-dark);
+}
 
+.navbar-link:focus {
+	border: 1px solid var(--brand-fg-dark);
 }
 
 .banner {
 	height: 480px;
 	width: 100%;
-	display: flexbox;
 	padding-left: 128px;
 	align-content: center;
 }
@@ -108,10 +139,21 @@ h1 {
 	border: 1px solid rgba(0, 0, 0, .2);
 	box-sizing: border-box;
 	box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);
+	padding: 40px;
 }
 
 .bento-tile {
+	background: linear-gradient(45deg, var(--background), var(--background-accented));
+	border-radius: 50px;
+	border: 1px solid rgba(0, 0, 0, .2);
+	box-sizing: border-box;
+	box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);
+	padding: 40px;
+}
 
+.bento-heading {
+	color: var(--foreground);
+	margin: 0;
 }
 
 .section-text {
@@ -129,3 +171,80 @@ h1 {
 	transform: rotate(-20deg);
 	left: calc(50% - 500px);
 }
+
+.button {
+	background: linear-gradient(90deg, var(--brand-fg-dark), var(--brand-fg-light));
+	padding: 20px;
+	border-radius: 50px;
+	text-decoration: none;
+	display: block;
+	width: fit-content;
+	color: var(--brand-bg-light);
+	margin-top: 1rem;
+	transition: .2s all;
+	background-size: 200%;
+}
+
+.button:hover {
+	background-size: 100%;
+}
+
+.button:focus {
+	text-decoration: underline;
+	background-size: 100%;
+}
+
+.section-heading {
+	display: flex;
+	justify-content: center;
+}
+
+.section-heading-child {
+	max-width: 800px;
+	display: block;
+}
+
+#bento0 {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: 1fr 1fr;
+	gap: 15px;
+	grid-auto-flow: row;
+	grid-template-areas:
+		"a0 b0"
+		"a0 c0"
+}
+
+#a0 { 
+	grid-area: a0;
+	text-align: right;
+}
+
+#b0 {
+	grid-area: b0;
+	height: 300px;
+}
+
+#c0 {
+	grid-area: c0;
+	height: 300px;
+}
+
+@media only screen and (max-width: 600px) {
+	.banner {
+		padding-left: 50px;
+	}	
+
+	.banner-heading {
+		font-size: 64px;
+		height: 64px;
+	}
+
+	#bento0 {
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr 1fr 1rw;
+		grid-template-areas:
+			"a0"
+			"a0 c0"
+	}
+}