@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(900px);

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

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

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

    &:last-child {
      margin-bottom: 0;
    }
  }

  table {
    border: 2px solid var(--background-2);
    border-collapse: collapse;
    width: 100%;
  }

  thead {
    background-color: var(--background-2);
    border-bottom: 2px solid var(--background-2);
    text-align: left;
  }

  tr {
    border: 2px solid var(--background-2);
  }

  td,
  th {
    padding: var(--medium-spacing);
  }

  tbody {
    > tr:nth-of-type(2n) {
      background-color: var(--background-2);
    }
  }

  .chart {
    display: block;
    width: 100%;
  }
}

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