/* Set up styles for the header */
.header {
display: grid;
grid-template-columns: calc(60% - 1px) calc(40% - 1px);
gap: 2px;
margin-bottom: 2px;
}
/* Adjust header parts */
.header-item {
background-color: #CEF2E0;
border: 1px solid #2E8B57;
padding: 1rem;
}
/* Set font-size for titles */
.title {
font-size: 150%;
}
/* Set styles for the category banner */
.category-banner {
text-align: center;
background-color: #D8E4F2;
border: 1px solid #2E8B57;
padding: 1rem;
margin-bottom: 2px;
}
/* Set styles for the article list */
.article-list {
background-color: #F1F6FB;
border: 1px solid #2E8B57;
padding: 1rem;
}
/* Mobile styles */
@media (max-width: 875px) {
/* Make header grid 1 column */
.header {
grid-template-columns: 1fr
}
/* Remove category images */
.category-banner img {
display: none;
}
/* Increase font size categories section */
.category-banner > :not(.title) {
font-size: 110%;
}
}