Template:ProsAndCons/styles.css

.prosandcons-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: min-content min-content 1fr min-content;
	grid-template-areas:
		"Summary Summary"
		"Pros-Header Cons-Header"
		"Pros Cons"
		"Notes Notes";
		
	font-size: 0.875em;
}

.Summary {
	grid-area: Summary; 
	text-align: center;
}

.Pros-Header {
	grid-area: Pros-Header;
	border-bottom: 1px solid var( --border-color-base );
	color: var(--color-pastel-green);
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
}
.Cons-Header {
	grid-area: Cons-Header;
	border-bottom: 1px solid var( --border-color-base );
	color: var(--color-pastel-red);
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
}

.Pros {
	grid-area: Pros; 
	border-right: 1px solid var( --border-color-base );
	border-bottom: 1px solid var( --border-color-base );
	padding-right: 0.67em;
}

.Cons {
	grid-area: Cons; 
	border-bottom: 1px solid var( --border-color-base );
	padding-left: 0.67em;
}

.Notes {
	padding-top: 0.33em;
	grid-area: Notes; 
}