feat: organization page responsive

static/assets/organization.css

@@ -13,6 +13,10 @@
   font-size: 1.2em;
 }
 
+.header-title {
+  text-align: right;
+}
+
 .return {
   display: flex;
   align-items: center;
@@ -115,6 +119,16 @@
   justify-content: center;
   align-items: center;
   font-size: 3.5em;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.media-container {
+  position: relative;
 }
 
 .media-overlay i {
@@ -142,6 +156,7 @@
 } */
 
 .media {
+  height: 100%;
   border-radius: 4px;
   background-size: cover;
   background-position: center;
@@ -217,6 +232,7 @@ section {
   justify-content: space-between;
   align-items: center;
   padding: 1em 2em 1em 2em;
+  cursor: pointer;
 }
 
 .schedule-category-collapse-icon {
@@ -236,10 +252,12 @@ section {
   border-radius: 4px;
   background-color: #ECF0F1;
   width: 40;
+
   margin-left: 2em;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-right: 40em;
+  
   padding: 1em 2em 1em 2em;
 }
 
@@ -391,4 +409,66 @@ section {
 
 .footer div:nth-child(3) {
   background-color: rgb(253, 110, 11, .83);
+}
+
+
+@media (max-width: 900px) {
+
+  .cover-background {
+    height: 30em;
+    width: 100%;
+  }
+  
+  .cover {
+    height: 30em;
+    margin-top: -30em;
+  }
+  
+  .cover-content {
+    height: 30em;
+
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .cover-image {
+    margin-right: 0;
+    margin-bottom: 3em;
+  }
+
+  .cover-title {
+    margin-bottom: .25em;
+  }
+
+  .media-mosaic {
+    height: 33em;
+    grid-template-columns: .5fr .5fr;
+    grid-template-rows: 1fr .5fr .5fr;
+  }
+  .media-main {
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 2;
+  }
+
+  .schedule-category-days-container {
+    margin-right: 5em;
+  }
+
+  .pricing-card {
+    margin-right: .5em;
+  }
+
+  .contact {
+    width: 100%;
+  }
+
+  .contact-item {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  .contact-content {
+    word-break: break-all;
+  }
 }