body {
  > main {
    aside#sidebar,
    aside#toc {
      position: sticky;
      display: none;
      top: 0;
    }

    article {
      ul,
      ol {
        padding-left: 20px;
      }

      > footer {
        nav {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 1rem;

          a {
            width: 100%;
          }

          button.next,
          button.prev {
            width: 100%;
            padding: 1rem;
            height: 100%;
            transition:
              background-color 0.3s ease,
              color 0.3s ease;

            &:hover {
              background-color: var(--md-sys-color-primary);
              color: var(--md-sys-color-on-primary);
            }
          }

          button.next {
            text-align: right;
          }

          button.prev {
            text-align: left;
          }

          &:not(:has(button.prev)) {
            > a {
              margin-left: auto;
            }
          }
        }
      }
    }
  }
}

#mobile {
  display: block;
}

@media (min-width: 576px) {
  body {
    > main {
      article {
        > footer {
          nav {
            flex-wrap: nowrap;

            a {
              width: 50%;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {
  body {
    > main {
      display: grid;
      grid-template-columns: repeat(10, 1fr);

      aside#sidebar {
        display: block;
        grid-column-start: span 3;
      }

      article {
        grid-column-start: 5;
        grid-column-end: 11;
      }
    }
  }

  #mobile {
    display: none;
  }
}

@media (min-width: 1200px) {
  body {
    main {
      grid-template-columns: repeat(12, 1fr);

      aside#sidebar {
        grid-column-start: span 2;
      }

      aside#toc {
        display: block;
        grid-column-start: 11;
        grid-column-end: 13;
      }

      article {
        grid-column-start: 4;
        grid-column-end: 10;
      }
    }
  }
}