pages/index.module.css

@@ -1,19 +1,34 @@
 .intro {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: flex-start;
   align-items: center;
   position: relative;
 
-  height: calc(580rem / 16);
+  margin: 0 auto;
+  height: 65vh;
+  min-height: calc(420rem / 16);
+  max-height: calc(580rem / 16);
+  max-width: calc(800rem / 16);
+}
+
+.introTop {
+  flex-grow: 1;
 }
 
 .introContent {
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
+.introBottom {
+  flex-grow: 1;
+  min-height: calc(132rem / 16);
+}
+
 .clubTitleWrapper {
   display: flex;
   flex-direction: row;
@@ -46,7 +61,7 @@
 .codey {
   position: absolute;
   bottom: calc(-124rem / 16);
-  right: 20%;
+  right: calc(20rem / 16);
   z-index: -1;
 }
 

pages/index.tsx

@@ -27,6 +27,7 @@ export default function Home() {
   return (
     <>
       <header className={styles.intro}>
+        <div className={styles.introTop} />
         <div className={styles.introContent}>
           <div className={styles.clubTitleWrapper}>
             <Image src="/images/logo-icon.svg" alt="CSC Logo" />
@@ -38,6 +39,7 @@ export default function Home() {
           </p>
           <SocialLinks color="gradient" size="big" />
         </div>
+        <div className={styles.introBottom} />
         <Image
           className={styles.codey}
           src="/images/home/codey_sitting.svg"