/*
Basic layout
*/
body {
  display: flex;
  flex-direction: column; /* order child elements in columns (header, main, footer) */
  min-height: 100vh;
}

.page__header__homelink {
  float: left;
}

.page__header__logo {
  height: auto;
  margin-top: .5rem;
  max-width: 75px;
}

.page__header__sitetitle {}

.page__header__siteclaim {
  float: left;
  margin: .5rem;
}

.page__main {
  display: flex; /* init as flex element for child elements */
  flex-direction: column; /* order child elements in columns (section.content, .page__sidebar) */
  flex-grow: 1; /* take all of the available height (height of body - height of header - height of footer) */
  width: 100%;
}

.page__content {
  flex-grow: 1; /* take all the available height, when the sidebar is below the content */
}

.page__sidebar {
  display: flex; /* init as a flex element */
  flex-direction: column;
  padding-bottom: .5rem;
}

.page__sidebar .widget {
  margin: .25rem 0;
}

.page__sidebar .widget:first-child {
  margin-top: 0;
}

.page__sidebar .widget:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 400px) and (max-width: 649px) {
  .page__sidebar {
    flex-direction: row;
  }

  .page__sidebar .widget {
    flex-grow: 1; /* they will grow when more space is available */
    flex-basis: 33.333%;
    margin: 0 .5rem 0 0;
  }

  .page__sidebar .widget:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 650px) {
  .page__main {
    flex-direction: row; /* order child elements in rows (section.content, .page__sidebar) */
  }

  .page__sidebar {
    flex-direction: column;
    padding-left: .5rem;
    width: 9rem;
  }

  .page__sidebar.left {
    order: -1;
    padding-left: 0;
    padding-right: .5rem;
  }

  .page__sidebar .widget {
    margin: .25rem 0;
  }
}