.community {
	padding-top: calc(var(--layout-header-height) + 2rem);
	background:
		radial-gradient(circle, rgba(70, 100, 100, .2) 1.2px, transparent 1.5px) 0 0 / 24px 24px,
		radial-gradient(85% 80% at 0% 500px, rgba(150, 224, 212, .30), transparent 46%),
		#fbfdfd;
}

/* Courses */
.community .events-block {display: flex; flex-direction: column; gap: 1rem; margin-top: 3rem;}

/* Course Card */
.community .event-card {margin: 0 1rem;}

/* Banners */
.community .events-block .banner {
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	position: relative; width: 100%; min-height: 280px; margin-top: 1rem; border-radius: 20px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
}
.community .events-block .banner .link {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.community .events-block .banner + .event-card {margin-top: 1rem;}

.community .banner.image img {border-radius: 20px;}
.community .banner.image.cms {background-image: linear-gradient(white 50%, #6e1df4 50%);}
.community .banner.image.index {background-image: linear-gradient(white 50%, #e8daff 50%);}

.community .banner.contact {background-color: #f2efff; padding: 1rem;}
.community .banner.contact p {font-size: 1.2rem; font-weight: bold; color: var(--green-dark);}
.community .banner.contact form {width: 100%; display: flex; flex-direction: column; align-items: center;}
.community .banner.contact label {width: 80%; position: relative;}
.community .banner.contact label .errorMessage {position: absolute; top: -20px; width: 100%; text-align: center;}
.community .banner.contact input {height: 50px !important; border: none; border-radius: 5px; text-align: center;}
.community .banner.contact button {
	height: 50px; border-radius: 5px; background-color: var(--green-dark); font-size: 1rem; font-weight: bold;
}

.community .banner.coworkers {background-color: darkblue; color: white;}
.community .banner.coworkers p {width: 80%; margin: 0 auto 1rem auto; font-size: 1rem; text-align: center;}
.community .banner.coworkers p:nth-child(2) {font-size: 0.8rem;}
.community .banner.coworkers .co-workers-logos {
	display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center;
}
.community .banner.coworkers .co-workers-logos img {width: auto; height: 30px; object-fit: contain;}

@media screen and (min-width: 40em) {
	/* Courses */
	.community .events-block {
		display: grid; grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 2rem; grid-row-gap: 2rem;
	}
	.community .events-block .chunk-title {display: none;}

	/* Course Card */
	.community .event-card {margin: 0;}

	/* Banners */
	.community .events-block .banner {min-height: unset; margin: 0 auto 0 0;}
	.community .events-block .banner:last-child {grid-column: 4 / 5;}
	.community .events-block .banner + .event-card {margin-top: 0;}
	.community .events-block .banner .link {border-radius: 20px;}
	.community .events-block .banner .link:hover {outline: 2px solid var(--green-main);}

	.community .banner.contact {border: 1px solid var(--green-dark);}
}