Increase heading font sizes

- Fix Bootstrap `font-sizes` map override by including before imports
- Adjust Home Intro card spacing

apps/site/src/lib/styles/_bootstrap-utils.scss

@@ -1,13 +1,15 @@
-@import "./zothacks-theme";
-
 @import "~bootstrap/scss/functions";
+
+// Bootstrap overrides (must come before importing variables)
+$font-family-base: var(--next-font-fuzzy-bubbles);
+$font-size-base: 1.25rem;
+$h1-font-size: 5rem;
+$h2-font-size: 3rem;
+$headings-font-weight: 700;
+
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/variables-dark";
+
 @import "~bootstrap/scss/maps";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
-
-// bootstrap overrides
-$font-family-base: var(--next-font-fuzzy-bubbles);
-$font-size-base: 1.25rem;
-$headings-font-weight: 700;

apps/site/src/views/Home/sections/Intro/Intro.module.scss

@@ -1,7 +1,7 @@
 @use "bootstrap-utils" as bootstrap;
 
 .intro {
- @include bootstrap.padding(8rem 1rem);
+ @include bootstrap.padding(10rem 0.5rem);
 
  background-image: url("~src/assets/images/index-card-mobile.svg");
  background-size: cover;
@@ -14,12 +14,7 @@
  -1px -1px 8px 4px rgba(0, 0, 0, 0.2);
 
  h2 {
- margin-top: 20px;
- margin-bottom: 50px;
- @include bootstrap.media-breakpoint-up(sm) {
- margin-top: 0px;
- margin-bottom: 70px;
- }
+ @include bootstrap.margin-bottom(3rem);
  }
 
  @include bootstrap.media-breakpoint-up(sm) {

apps/site/src/views/Home/sections/Landing/Landing.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import ApplyButton from "@/views/Home/components/ApplyButton/ApplyButton";
+
 import styles from "./Landing.module.scss";
 
 function Landing() {
  return (
  <div className={styles.landing}>
  <h1>ZotHacks 2023</h1>
- <p>November 4&ndash;5</p>
+ <p className="fs-2">November 4&ndash;5</p>
  <ApplyButton />
  </div>
  );