@mixin responsive-container($breakpoint) {
  margin-left: auto;
  margin-right: auto;
  width: $breakpoint;

  @media (max-width: $breakpoint) {
    width: 100%;
  }
}

.page-header,
.page-main,
.page-footer {
  @include responsive-container(1200px);

  margin-bottom: var(--large-spacing);
  padding: var(--large-spacing);
}

.page-header {
  border-bottom: 4px solid var(--background-2);
}

.page-main {
  h2,
  img,
  p {
    margin-bottom: var(--medium-spacing);
  }
}

.page-footer {
  background-color: var(--background-2);
  display: flex;
  flex-direction: column;
  gap: var(--large-spacing);
}