html,
body {
  margin: 0;
  padding: 0;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1 0 auto;
}

hr {
  display: block;
  background-color: $colour-grey-lightmid;
  height: 1px;
  border: 0;
  margin: 1em 0;
  padding: 0;
}

.hr-light {
  border-color: $colour-grey-light;
}

.block-center {
  // utility function designed to override other classes
  // scss-lint:disable ImportantRule
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.img-respond {
  max-width: 100%;
}

.img-respond--fill {
  display: block;
  width: 100%;
}

.circle {
  border-radius: 50%;
  overflow: hidden;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}