.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;
}