add responsivness

assets/css/events.css

@@ -1,65 +1,93 @@
 .eventsMainTitle {
-	text-align: center;
-	font-family: 'Amazon Ember';
-	font-weight: 900;
-	font-size: var(--font-size-h3);
-	color: var(--color-primary-gray);
+  text-align: center;
+  font-family: 'Amazon Ember';
+  font-weight: 900;
+  font-size: var(--font-size-h3);
+  color: var(--color-primary-gray);
 }
 
 #eventsGrid {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	align-items: start;
-	justify-items: center;
-	list-style-type: none;
-	padding: 0 100px;
-	margin: 0;
-	gap: 10px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  align-items: start;
+  justify-items: center;
+  list-style-type: none;
+  padding: 0 100px;
+  margin: 0;
+  gap: 10px;
 }
 
 .eventObject {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-    margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 50px;
 }
 
-.eventTitle{
-    font-family: "Amazon Ember";
-    font-size: var(--font-size-name);
-	color: var(--color-primary-white);
-    justify-self: center;
-    align-self: center;
-    margin-bottom: 5px;
+.eventTitle {
+  font-family: 'Amazon Ember';
+  font-size: var(--font-size-name);
+  color: var(--color-primary-white);
+  justify-self: center;
+  align-self: center;
+  margin-bottom: 5px;
 }
 
 .eventBanner {
-	height: 500px;
-	width: 500px;
-	margin-top: 0px;
-    object-fit: contain;
-    border: 2px solid var(--color-primary-gray);
-	border-radius: 10px;
+  height: 500px;
+  width: 500px;
+  margin-top: 0px;
+  object-fit: contain;
+  border: 2px solid var(--color-primary-gray);
+  border-radius: 10px;
 }
 
 .eventInfo {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .eventInfoIcon {
-	margin-top: 10px;
+  margin-top: 10px;
 }
 
 .eventInfoText {
-	font-family: "Amazon Ember Display";
-    font-size: var(--font-size-details);
-	margin-top: 10px;
-	margin-left: 10px;
+  font-family: 'Amazon Ember Display';
+  font-size: var(--font-size-details);
+  margin-top: 10px;
+  margin-left: 10px;
 }
 
 a {
-	color: var(--color-primary-gray);
+  color: var(--color-primary-gray);
 }
 
+@media (max-width: 879px) {
+  .eventsMainTitle {
+    margin: 0;
+  }
 
+  #eventsGrid {
+    grid-template-columns: repeat(1, 1fr);
+    padding: 0 10px 20px 10px;
+  }
+
+  .eventObject {
+    margin-top: 20px;
+  }
+
+  .eventBanner {
+    height: 300px;
+    width: 300px;
+  }
+}
+
+@media (min-width: 880px) and (max-width: 1102px) {
+  #eventsGrid {
+    padding: 0 10px 20px 10px;
+  }
+  .eventBanner {
+    height: 400px;
+    width: 400px;
+  }
+}

assets/css/main.css

@@ -44,7 +44,8 @@ a {
   text-decoration: none;
 }
 
-html,body {
+html,
+body {
   width: 100%;
   overflow-x: hidden; /* Prevents horizontal scroll */
 }
@@ -70,6 +71,10 @@ html,body {
 }
 
 @media (max-width: 769px) {
+  main {
+    margin: 50px 0px 0 0;
+  }
+
   :root {
     --font-size-h1: 32px;
     --font-size-h2: 20px;
@@ -88,4 +93,10 @@ html,body {
     --font-size-quote: 10px;
     --font-size-code: 8px;
   }
+
+  html,
+  body {
+    width: 100%;
+    overflow-x: visible;
+  }
 }