/* ==========================================================================
   Metamorph Pre School — "Age specific modules" block (Our Promise, Admissions)
   Breakpoints: tablet <= 1024px, mobile <= 767px
   ========================================================================== */

.modules-title {
	margin: 6% 0 0;
	padding: 0 30px;
}

.modules-title__inner {
	padding: 10px;
}

.modules-title__heading {
	margin: 0;
	padding: 0 130px 0 300px;
	color: #0a303a;
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 800;
	line-height: 1.1em;
	letter-spacing: 3.5px;
}

.modules {
	margin: 2% 0 3%;
	padding: 0 30px;
}

.modules--mobile {
	display: none;
}

.modules__row {
	display: flex;
	max-width: 1260px;
	margin: 0 auto;
}

.modules__side {
	width: 18%;
	min-height: 1px;
}

.modules__main {
	width: 63.332%;
	padding: 10px;
}

.modules__grid {
	display: flex;
	padding: 0 30px;
}

.modules__cell {
	width: 33.333%;
	min-height: 1px;
}

/* Elementor default column padding, removed on "flush" cells */
.modules__cell > .age-box {
	margin: 10px;
}

.modules__cell--flush > .age-box {
	margin: 0;
}

/* Side cards are pulled up beside the centre one (-73% of the column width) */
.modules__cell--raised > .age-box {
	margin-top: calc(-73% + 10px);
}

.modules__cell--lowered > .age-box {
	margin-top: 6%;
}

.age-box {
	padding: 15px 30px;
	border: 1px solid;
	box-shadow: 8px 8px 0 0 #EDEDED;
	transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}

.age-box__wrapper {
	text-align: start;
}

.age-box__img {
	display: inline-block;
	width: 81%;
	margin: 0 0 15px;
}

.age-box__img img {
	display: block;
	width: 100%;
}

.age-box__title {
	margin: 20px 0 .6em;
	font-family: var(--font-comic);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.21em;
}

.age-box__age {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
}

.age-box--blue   { border-color: #1BA7DC; color: #1BA7DC; }
.age-box--red    { border-color: #D23C3E; color: #D23C3E; }
.age-box--green  { border-color: #96C34D; color: #96C34D; }
.age-box--orange { border-color: #E86936; color: #E86936; }

.age-box--blue:hover   { box-shadow: 10px 10px 0 0 #1BA7DC; }
.age-box--red:hover    { box-shadow: 10px 10px 0 0 #D23C3E; }
.age-box--green:hover  { box-shadow: 10px 10px 0 0 #96C34D; }
.age-box--orange:hover { box-shadow: 10px 10px 0 0 #E86936; }

.age-box__title,
.age-box__age {
	color: inherit;
}

/* ==========================================================================
   RESPONSIVE — TABLET (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.modules-title__heading,
	.age-box__title {
		line-height: 1.2em;
	}

	.modules-title__heading {
		padding: 0;
		font-size: 30px;
	}

	.modules__row {
		flex-wrap: wrap;
	}

	.modules__side--left  { width: 2%; }
	.modules__side--right { width: 13%; }
	.modules__main        { width: 97%; }
}

/* ==========================================================================
   RESPONSIVE — MOBILE (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
	.modules-title {
		padding: 0 20px;
	}

	.modules-title__heading {
		line-height: 1.3em;
	}

	/* Mobile modules layout */
	.modules--desktop {
		display: none;
	}

	.modules--mobile {
		display: block;
		padding: 0 20px;
	}

	.modules__row,
	.modules__grid {
		flex-wrap: wrap;
	}

	.modules__side,
	.modules__main,
	.modules__cell {
		width: 100%;
	}

	.modules__grid {
		padding: 0 20px;
	}

	.modules__cell--inset > .age-box {
		margin: 2%;
	}

	.modules__cell--empty.modules__cell--inset {
		height: 1px;
	}

	.age-box--mobile {
		padding: 20px 30px;
	}

	.age-box__title {
		font-size: 21px;
		line-height: 1.21em;
	}
}