/* header */
.page__header {
  padding: 8px 12px 8px 20px;
  z-index: 20;
  position: sticky;
  top: 0;
  width: 100%;

  & .btn--primary {
    padding: 4px 20px;
    white-space: nowrap;
    font-size: 14px;
  }

  &>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1312px;
    margin: auto;
    gap: 8px;

    & > :nth-child(2) {
      order: 3;
    }
    & > :nth-child(3) {
      order: 2;
      margin-left: auto;
    }
  }

  & ul {
    list-style: none;

    & a {
      text-decoration: none;
    }
  }
  @media (min-width: 1080px) {
    position: relative;
    & .btn--primary {
      padding: 12px 24px;
      font-size: 16px;
    }
    &>div {
      gap: 0;
      & > :nth-child(2) {
        order: 2;
      }
      & > :nth-child(3) {
        order: 3;
        margin-left: 0;
      }
    }
  }
}


.page__main {
  max-width: 1440px;
  margin: auto;
}


/* page layout */
.page__body:has(aside) {
  display: flex;
  flex-direction: column-reverse;
  gap: 80px;

  & aside,
  & .page__content {
    max-width: 100%;
  }
}


@media (min-width: 768px) {
  .page__header {
    padding: 0 64px;
  }

  .page__body:has(aside) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    & aside {
      max-width: 444px;
      width: 100%;
      flex: 0.34;
    }

    & .page__content {
      max-width: 777px;
      width: 100%;
      flex: 0.59;
    }
  }
}