// Communities SCSS.
// Make sure to use SASS pre-processor when adding to Jetpack Edit CSS.

#front-page-5 {
	h3.widgettitle {
		color: #eabc25;
		font-size: 6rem;
		font-weight: 300;
		margin: 0 auto;
		max-width: 1200px;
		padding: 50px 30px 0;
		text-transform: none;
	}
	.community-subheader {
		margin: 0 auto 10px;
		max-width: 1200px;
		padding: 1em 30px 50px;
	}
}

.community-row {
	display: flex;
	.community-half {
		padding: 5% 6%;
		width: 50%;
		h2 {
			font-size: 3.6rem;
			font-weight: 400;
			margin: 0 0 60px 0;
			position: relative;
			a {
				color: #000;
				text-decoration: none;
			}
		}
		h2::after {
			background-color: #eabc25;
			content: '';
			display: block;
			height: 2px;
			position: relative;
			top: 30px;
			width: 90px;
		}
		p {
			font-size: 1.6rem;
			text-align: justify;
			a {
				display: block;
				font-weight: 600;
				text-decoration: none;
			}
		}
	}
	.community-half.no-padding {
		background-position: center center !important;
		background-size: cover !important;
		padding: 0;
		a {
			display: block;
			height: 100%;
			width: 100%;
		}
	}
}

@media (max-width: 767px) {
	.community-row:nth-child(even) {
		.community-half.no-padding {
			order: 1;
		}
		.community-half {
			order: 2;
		}
	}
	.community-row {
		flex-wrap: wrap;
		.community-half {
			display: block;
			width: 100%;
		}
		.community-half.no-padding {
			position: relative;
		}
		.community-half.no-padding::after {
			content: '';
			display: block;
			padding-top: 68%;
		}
	}
}