refactor: Update form styles and structure

This commit updates the form styles and structure in the `styles.scss` file. It includes changes to the headings (`h2`, `h3`, `h4`) to improve their readability and spacing. Additionally, it introduces a new section for sessions with improved layout and margin. These changes enhance the overall user experience and visual appeal of the form.

pages/dynamic/index.js

@@ -17,6 +17,7 @@ import useWorkshop from '../../components/Hooks/UseWorkshop';
 import Pagination from '../../components/WorkshopPieces/Pagination';
 import { Fade } from '@mui/material'
 import {ErrorBoundary} from "react-error-boundary";
+import { PaddingRounded } from '@mui/icons-material'
 
 const drawerWidth = '-30%';
 
@@ -367,7 +368,11 @@ function ErrorFallback({error}) {
           <Main open={editorOpen}
             id='main'
             style={{
-              paddingLeft: '0px'
+              paddingLeft: '0px',
+              paddingRight: {
+                sm: '0px',
+                xs: '0px',
+              }
             }}
           >
             <div className="card-page">

styles/styles.scss

@@ -620,9 +620,11 @@ header {
 
 //frontmatter styles
 .frontmatter {
-  width: 90%;
-  padding-left: 20px;
-  padding-right: 20px;
+  @include respond-above(md) {
+    width: 90%;
+    padding-left: 20px;
+    padding-right: 20px;
+    }
 
   @include respond-above(xl) {
     display: grid;
@@ -638,6 +640,14 @@ header {
     background-color: $primary-color-bark;
     margin-bottom: 20px;
     grid-column: 1;
+    overflow-x: hidden;
+    padding-left: 20px;
+    padding-right: 20px;
+    @include respond-above(md) {
+      overflow-x: visible;
+      padding-left: 0px;
+      padding-right: 0px;
+      }
 
     h1 {
       // front page title
@@ -655,8 +665,11 @@ header {
       background-color: $primary-color-brown;
       position: absolute;
       height: 100%;
+      width: 201vw;
+      @include respond-above(md) {
+        width: 100vw;
+        }
       // width entire screen 
-      width: 100vw;
       left: -150px;
       overflow-x: hidden;
     }
@@ -707,6 +720,10 @@ header {
 
   &-item {
     grid-column: 1;
+    padding-left: 20px;
+    @include respond-above(md) {
+      padding-left: 0px;
+      }
 
     h2,
     h3 {