Make performers, info and program responsive

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%;
+}