.page {
  width: 100%;
}

main {
  max-width: 880px;
  margin: 1.5rem auto 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-template-areas: "m-header " "m-content";
}

main.two-column {
  grid-template-columns: auto minmax(auto, 250px);
  grid-template-areas: "m-header    m-header" "m-content   m-aside ";
  grid-column-gap: 2em;
}
@media (max-width: 768px) {
  main.two-column {
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    grid-template-areas: "m-header " "m-content" "m-aside  ";
  }
}

main > header {
  grid-area: m-header;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas: "h-main    h-r" "h-l        . ";
}
main > header .header-secondary-left {
  grid-area: h-l;
  place-self: center start;
  margin-top: 0.5rem;
}
main > header .header-secondary-right {
  grid-area: h-r;
  place-self: center end;
  margin-left: 1rem;
}
main > header .header-main {
  grid-area: h-main;
}
main > header .header-main h1 {
  margin-bottom: 0;
}

main > .main-content {
  grid-area: m-content;
}
main > .main-content img {
  max-width: 100%;
}

main.two-column > aside {
  font-size: 0.9rem;
  color: #6c757d;
}
main.two-column > aside a {
  color: #6c757d;
}
main.two-column > aside {
  grid-area: m-aside;
  padding-top: 0.5em;
}
@media (max-width: 768px) {
  main.two-column > aside {
    margin-top: 2.5rem;
  }
}

div.main-footer-sep {
  max-width: 880px;
  margin: 5rem auto 3rem auto;
  padding: 0 7rem;
}
@media (max-width: 768px) {
  div.main-footer-sep {
    padding: 0 1rem;
  }
}

.page > footer {
  margin: 0 auto;
  padding: 0 1rem;
  max-width: 880px;
}

.page > footer .link-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.page > footer .link-list a {
  font-size: smaller;
  text-decoration: none;
  color: #757579;
  margin: 0 1rem;
}

.page > footer .logo-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.page > footer .logo-row img {
  margin: 0 1.5rem;
  filter: grayscale(100%) contrast(30%);
}
.page > footer .logo-row img:hover {
  filter: contrast(70%);
}
.page > footer .logo-row .divider {
  border-left: 1px solid #cbcbcb;
  height: 45px;
}

hr {
  color: #646363 !important;
}