Make performers, info and program responsive

pages/info.tsx

@@ -31,7 +31,7 @@ const Info = () => {
     <section className={shared.page}>
       <h1>Info</h1>
 
-      <i>Lisätietoja tulossa myöhemmin!</i>
+      <i className={shared.followNote}>Lisätietoja tulossa myöhemmin!</i>
       <div className={styles.infoContainer}>
         <div className={styles.infoTitle} onClick={() => toggleInfo('shop')}>
           <h2>Livonsaaren Osuuskauppa</h2>

pages/program.tsx

@@ -30,7 +30,7 @@ const Program = () => {
   return (
     <section className={shared.page}>
       <h1 id='program-start'>Ohjelma</h1>
-      <i>OHJELMA PÄIVITTYY KEVÄÄN MITTAAN, PYSYKÄÄ KUULOLLA!</i>
+      <i className={shared.followNote}>Lisätietoja tulossa myöhemmin!</i>
       <div className={styles.dayContainer}>
         <div
           className={styles.programTitle}

styles/Index.module.scss

@@ -2,4 +2,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
+  margin-bottom: 8rem;
+  width: 47rem;
+  max-width: 100%;
 }

styles/Info.module.scss

@@ -3,6 +3,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 90%;
+
   hr {
     border: 0.2rem solid #d5caf29d;
     width: 80%;
@@ -22,6 +24,7 @@
   margin-top: 1.5rem;
   cursor: pointer;
   width: 80%;
+  text-align: left;
 
   h2 {
     margin-right: 1rem;

styles/Performers.module.scss

@@ -3,6 +3,7 @@
   justify-content: flex-start;
   align-items: flex-start;
   width: 90%;
+  cursor: pointer;
 
   p {
     padding-left: 1rem;
@@ -52,3 +53,10 @@
     transition: color 0.3s;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .performerContainer {
+    flex-direction: column;
+    align-items: center;
+  }
+}

styles/Program.module.scss

@@ -3,6 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 90%;
 
   hr {
     border: 0.2rem solid #d5caf29d;

styles/Shared.module.scss

@@ -12,8 +12,15 @@
 }
 
 .page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
   margin-bottom: 8rem;
   width: 47rem;
   max-width: 100%;
 }
+
+.followNote {
+  max-width: 90%;
+}