Calendar changes

www/css/style.css

@@ -80,7 +80,7 @@ a:visited {
 
 @media only screen and (max-width: 480px) {
 	html, body {
-		font-size: 16px;
+		font-size: 12px;
 		line-height: 160%;
 	}
 }
@@ -191,7 +191,7 @@ section:nth-child(2) {
 	background-color: #fbfbfb;
 	background-image: url(../img/theme/paint/paint-yellow.svg) , url(../img/theme/elements/chenille.svg);
 	background-repeat: no-repeat;
-	background-size:auto, 50%;
+	background-size:auto, 60%;
 	background-position: 0% 100%, 0% 0%;
 
 }
@@ -199,7 +199,7 @@ section:nth-child(3) {
 	background-color: #fbfbfb;
 	background-image: url(../img/theme/paint/paint-orange.svg),  url(../img/theme/elements/cocon.svg);
 	background-repeat: no-repeat;
-	background-size:auto, 50%;
+	background-size:auto, 60%;
 	background-position: 0% 100%, top right;
 }
 
@@ -207,7 +207,7 @@ section:nth-child(4) {
 	background-color: #fbfbfb;
 	background-image: url(../img/theme/paint/paint-magenta.svg), url(../img/theme/elements/cocon_sortie.svg);
 	background-repeat: no-repeat;
-	background-size:auto, 50%;
+	background-size:auto, 60%;
 	background-position: 0% 100%, center left;
 }	
 
@@ -216,7 +216,7 @@ section:nth-child(5) {
 	background-color: #fbfbfb;
 	background-image: url(../img/theme/paint/paint-violet.svg), url(../img/theme/elements/early_papillon.svg);
 	background-repeat: no-repeat;
-	background-size:auto, 50%;
+	background-size:auto, 60%;
 	background-position: 0% 100%, center right;
 }	
 
@@ -224,7 +224,7 @@ section:nth-child(6) {
 	background-color: #fbfbfb;
 	background-image: url(../img/theme/elements/papillon.svg);
 	background-repeat: no-repeat;
-	background-size: 50%;
+	background-size: 60%;
 	background-position: top left;
 }	
 
@@ -267,6 +267,10 @@ section p a:active {
 		padding-right: 40px;
 	}
 
+	section > img {
+		padding: 0;
+	}
+
 	section h2 {
 		font-size: 2.6rem;
 	}
@@ -278,6 +282,10 @@ section p a:active {
 		font-size: 2.4rem;
 	}
 
+	section > img {
+		padding: 0;
+	}
+
 	section {
 		background-image: none
 	}
@@ -436,34 +444,93 @@ section p a:active {
 
 
 /*--------------------------------------------------------*/
-/* PRICE TABLE
+/* CALENDARS
 /*--------------------------------------------------------*/
 
-#calendar {
+.calendars {
-	width: 100%;
 	max-width: 100%;
 	margin: 0;
+	padding: 0 0 20%;
+	overflow-x: scroll;
+	overflow-y: visible;
+
+	--calendar-hour-width: 60px;
+	--calendar-max-daily-hours: 19;
+}
+
+/* .calendar {
+	max-width: 100%;
+	margin: 0 20px;
 	padding: 0;
+} */
+
+.calendar {
+	width: calc(var(--calendar-hour-width) * var(--calendar-max-daily-hours));
+	margin: 0 auto;
+	overflow: visible;
+}
+
+.calendar h2 {
+	padding: 0;
+	margin: 2em 0 1em 0;
+}
+
+#cal-container-1 {
+	width: calc(var(--calendar-hour-width) * 9);
+	margin-left: calc(var(--calendar-hour-width) * 9);
+}
+
+#cal-container-2 {
+	width: calc(var(--calendar-hour-width) * 19);
+}
+
+#cal-container-3 {
+	width: calc(var(--calendar-hour-width) * 7);
 }
 
 
 /*--------------------------------------------------------*/
 
 
-@media only screen and (max-width: 880px) {
+@media only screen and (max-width: 1200px) {
-	#calendar {
+	.calendars {
-		overflow-x: scroll;
+		width: max(
-	}
+			calc(var(--calendar-hour-width) * var(--calendar-max-daily-hours),
-
+			100vw)
-	#cal-container {
+		);
-		min-width: 1800px;
+		padding: 0 40px 20%;
-		margin: 0 0 40px 0; /* Fix the weird y-overflow of the calendar root */
+		--calendar-hour-width: 40px;
 	}
 }
 
+@media only screen and (max-width: 880px) {
+	.calendar h2 {
+		text-align: left;
+		padding: 0 40px;
+	}
+	#cal-container-1 {
+		margin-left: 0;
+	}
+}
 
+@media only screen and (max-width: 640px) {
+	.cal-details-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
 
+	.cal-container .cal-event-details {
+		min-width: 90% !important;
+		left: 5vw !important;
+	}
+}
 
+@media only screen and (max-width: 380px) {
+	.calendar h2 {
+		padding: 0 20px;
+	}
+}
 
 /*--------------------------------------------------------*/
 /* LOCATION
@@ -763,7 +830,7 @@ section p a:active {
 }
 
 .team-group figure img {
-	width: 260px;
+	width: 190px;
 }
 
 .team-group figcaption {