main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.title {
	background: #ededed;
	border-bottom: 1px solid teal;
	align-self: stretch;
	margin: 0;
	padding: 0 8px;
}

.title > h2 {
	max-width: 60rem;
	margin: 24px auto 8px auto;
}

article {
	max-width: 60rem;
	margin: 0 8px;
}

article :is(p, ol, ul) {
	font-family: open sans, sans-serif;
}

/****************************
 * Page: Profiles of Prayer *
 ****************************/

.profiles {
	width: 100%;
	margin: 16px 8px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
	padding: 8px;
}

.profiles a {
	display: flex;
	flex-direction: column;
}

.profiles img {
	width: 100%;
	height: auto;
}

/*******************
 * Page: Communities
 *******************/

.communities {
	max-width: 70rem;
}

.communities .logos {
	text-align: center;
}

.communities .logos a {
	display: inline-block;
	margin: 16px;
	position: relative;
}

.communities .logos img {
	max-width: 100%;
	height: auto;
}

.communities .logos span {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	background-color: rgba(0, 0, 0, .45);
	color: #fff;

	font-family: 'Cinzel', serif;
	font-weight: bold;

	opacity: 0;
	transition: opacity 150ms ease-in-out;
}

.communities a:is(:hover,:active) span {
	opacity: 1;
}

.teachers .cards a {
	--bg: #5df2f6;

	display: grid;
	grid:
		"img name"
		"img url"
		/ 250px auto
	;

	gap: 24px;
	padding: 12px;
	margin: 12px 0;

	border: 2px solid hsl(from var(--bg) h s calc(l - 10));
	border-radius: 24px;

	box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, .2);

	background: var(--bg);

	color: inherit;
	text-decoration: none;

	transition: all 250ms ease-in-out;

	img {
		grid-area: img;
		place-self: center;
	}

	.name {
		grid-area: name;
		place-self: end start;
		font-size: 1.5em;
	}

	.url {
		grid-area: url;
		place-self: start;
		font-family: sans-serif, system-ui;
		color: rgba(0, 0, 0, .7);
	}

	&:hover {
		--bg: hsl(from #5df2f6 h s calc(l - 20));
		text-decoration: underline;
	}
}