main {
  padding: var(--padding-main);
  box-sizing: border-box;

  h1, h2, h3, h4 {
    text-align: center;
    font-weight: var(--font-weight-bold);
    margin-top: 2em;
    margin-bottom: 1em;
  }

  h1 {
    font-size: var(--font-size-xxlarge);
    color: var(--primary-color);
  }

  h2 {
    font-size: var(--font-size-large);
    color: var(--font-color-normal);
  }

  h3 {
    font-size: var(--font-size-medium);
    color: var(--font-color-muted);
  }

  h4 {
    font-size: var(--font-size-small);
    color: var(--font-color-muted);
  }
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  animation: slideIn 0.3s ease;
  overscroll-behavior: contain;

  &.narrow {
    max-width: 1024px;
    margin: 0 auto;
  }
}

.multi-page {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  align-items: flex-start;
  
  .page {
    min-width: 0;

    &.main {
      flex: 10;
    }

    &.banner {
      display: block;
      flex: 2;
      min-width: 0;

      .banner-inner {
        display: flex;
        flex-direction: column;
      }

      &.left {
        align-items: flex-start;
        text-align: left;
      }

      &.right {
        align-items: flex-end;
        text-align: right;
      }

      &.dynamic {
        position: sticky;
        align-self: flex-start;
        top: calc(var(--header-height) + var(--padding-main));
        max-height: calc(100vh - var(--header-height) - (var(--padding-main) * 2));
      }
    }
  }
}

@media (max-width: 768px) {
  .multi-page {
    flex-direction: column;
  }
  
  .page.banner.dynamic {
    position: relative; 
    max-height: none;
    align-self: stretch;
  }
}