.main-page-block-heading {
color: #555555;
font-size: 2em;
font-variant: small-caps;
padding: 10px 10px 10px 25px;
}
.main-page-block-heading {
background-color: white;
border-bottom: 1px solid #555555;
}
.main-page-block-contents {
border-top: 3px solid white;
padding: 10px;
}
.main-page-responsive-columns {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 5px;
}
.main-page-responsive-columns > div:first-of-type {
flex: 1.18 1;
margin-right: 2px;
}
.main-page-responsive-columns > div:last-of-type {
flex: 1 1;
}
.main-page-responsive-columns td:nth-of-type(2) {
border-left: 2px solid #fff;
}
.main-page-first-row > div {
background-color: #f0f9f0;
}
.main-page-second-row > div {
background-color: #f0f4f9;
}
.main-page-third-row > div {
background-color: #f9f9f0;
}
/* Breakpoints */
@media all and ( max-width: 900px ) {
.main-page-block-heading {
font-size: 1.8em;
}
}
@media all and ( max-width: 760px ) {
.hp td {
width: 50% !important;
}
}
/* On mobile collapse into one column layout */
@media all and ( max-width: 500px ) {
.hp td,
.main-page-responsive-columns td {
display: block;
}
.main-page-responsive-columns td:nth-of-type(2) {
border-left: none;
}
.hp td {
width: 100% !important;
box-sizing: border-box;
border: 0 !important;
}
.main-page-block-heading {
text-align: center;
padding: 10px;
}
}