From 9ebbb2b31f396de53695926ec75aa5e682ad6abb Mon Sep 17 00:00:00 2001
From: flatplum <flatplum@proton.me>
Date: Mon, 15 Sep 2025 21:58:44 +1000
Subject: [PATCH] feat: apply various cosmetic changes

  Full list of changes:
    - modify media queries to standardised 768px breakpoint
    - adjust foreground title alignment on mobile
    - slightly lower font size on mobile
    - center description

  Todo:
    - convert min-width queries to max-width
---
 src/features/TitleHero/TitleHero.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/features/TitleHero/TitleHero.css b/src/features/TitleHero/TitleHero.css
index b98fb28..a474237 100644
--- a/src/features/TitleHero/TitleHero.css
+++ b/src/features/TitleHero/TitleHero.css
@@ -18,7 +18,7 @@
   color: transparent;
   -webkit-text-stroke: 1px #767676;
   font-weight: 900;
-  font-size: 9rem;
+  font-size: 16rem; /* md:text-[256px] */
   white-space: nowrap;
   line-height: 1;
   margin-bottom: -100px;
@@ -27,9 +27,10 @@
   mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
 }
 
-@media (min-width: 768px) {
+@media (max-width: 768px) {
   .hero-background {
-    font-size: 16rem; /* md:text-[256px] */
+    font-size: 8rem;
+    margin-bottom: -50px;
   }
 }
 
@@ -66,10 +67,11 @@
 .hero-description {
   max-width: 40%;
   margin-top: 2rem;
+  text-align: center;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 768px) {
   .hero-description {
-    max-width: 100%;
+    max-width: 80%;
   }
 }
\ No newline at end of file