Add footnotes to homepage

src/components/sections/FeatureSection.astro

@@ -1,5 +1,5 @@
 ---
-const { title, desc, image, color } = Astro.props;
+const { title, desc, image, color, footnote = '' } = Astro.props;
 import { Image } from "astro:assets";
 ---
 
@@ -11,6 +11,7 @@ import { Image } from "astro:assets";
   <div class="feature-image">
     <Image src={image} loading="lazy" alt="Mythic feature" />
   </div>
+    <p style="font-size: 0.8rem; font-style: italic;">{footnote}</p>
 </div>
 
 <style>

src/pages/index.astro

@@ -135,6 +135,7 @@ const socials = [
           image={features[0].image}
           id="1"
           color={features[0].color}
+          footnote="Some Windows® games may not be supported for use within Mythic."
         />
       </div>
       <div class="small-tile">
@@ -153,6 +154,7 @@ const socials = [
           image={features[2].image}
           id="3"
           color={features[2].color}
+          footnote="Steam support is still in development."
         />
       </div>
     </div>
@@ -196,6 +198,10 @@ const socials = [
       </span>
     </sub>
 
+    <sub style="font-style: italic;">
+      (Please note that Mythic is still in its alpha stage of development; expect bugs.)
+    </sub>
+
     <div class="social_wrap">
       {
         socials.map((social, index) => (
@@ -243,7 +249,7 @@ const socials = [
     height: 100%;
   }
 
-  @media only screen and (max-width: 768px) {
+  @media only screen and (max-width: 1024px) {
     .grid-container {
       display: block;
     }