diff --git a/www/api/main.css b/www/api/main.css
index 8e472c6..774adc5 100644
--- a/www/api/main.css
+++ b/www/api/main.css
@@ -143,3 +143,33 @@ body {
 		padding: 0 1rem;
 	}
 }
+
+@media screen and (max-width: 807px) {
+	#page {
+		grid-template-rows: 6rem calc(100vh - 8rem) 2rem;
+	}
+
+	#page-contents {
+		height: calc(100vh - 8rem);
+	}
+}
+
+@media screen and (max-width: 474px) {
+	#page {
+		grid-template-rows: 9rem calc(100vh - 11rem) 2rem;
+	}
+
+	#page-contents {
+		height: calc(100vh - 11rem);
+	}
+}
+
+@media screen and (max-width: 337px) {
+	#page {
+		grid-template-rows: 12rem calc(100vh - 14rem) 2rem;
+	}
+
+	#page-contents {
+		height: calc(100vh - 14rem);
+	}
+}
diff --git a/www/home/main.css b/www/home/main.css
index b6f7687..9ac2b92 100644
--- a/www/home/main.css
+++ b/www/home/main.css
@@ -163,3 +163,33 @@ p.example {
 		padding: 0 1rem;
 	}
 }
+
+@media screen and (max-width: 630px) {
+	#page {
+		grid-template-rows: 6rem calc(100vh - 8rem) 2rem;
+	}
+
+	#page-contents {
+		height: calc(100vh - 8rem);
+	}
+}
+
+@media screen and (max-width: 330px) {
+	#page {
+		grid-template-rows: 9rem calc(100vh - 11rem) 2rem;
+	}
+
+	#page-contents {
+		height: calc(100vh - 11rem);
+	}
+}
+
+@media screen and (max-width: 292px) {
+	#page {
+		grid-template-rows: 12rem calc(100vh - 14rem) 2rem;
+	}
+
+	#page-contents {
+		height: calc(100vh - 14rem);
+	}
+}