.appLayout {
  flex: 1;
  display: flex;
  flex-direction: column;

  > header {
    padding: 1rem 5rem;
    display: flex;
    gap: 1rem;
    min-height: 7rem;
    align-items: center;
    justify-content: space-between;

    section {
      display: flex;
      align-items: center;
      gap: 2rem;

      div:global(.election_status) {
        display: flex;
        gap: 1rem;
        line-height: 1.75rem;
        align-items: center;
        a:visited {
          color: var(--link-default);
        }
      }
    }
    section:global(.smaller-gap) {
      gap: 1rem;
    }
  }

  > main {
    flex: 1 1 auto;
    display: flex;
    padding: 2.5rem 5rem 5rem 5rem;
    gap: 2rem;
    background-color: var(--bg-gray);

    > nav {
      overflow: hidden;
      flex: 0 0 19.5rem;
      padding: 0;
      background-color: var(--bg-gray);
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    > article {
      flex: 1 1 auto;
      background-color: var(--bg-gray);
    }
  }

  > aside {
    flex: 0 0 8rem;
    padding: 0 4rem 0 20rem;
    display: flex;
    align-items: center;
  }

  > footer {
    flex: 0 0 5rem;
    background-color: var(--base-white);
    color: var(--color-help-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5rem;
    font-size: var(--font-size-sm);
    line-height: 1.25rem;
    a {
      color: var(--color-help-text);
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
