:root {
  --header-height: var(--sp-48);
}
header-sticky-wrapper {
  display: block;
  position: sticky;
  top: 0;
  background-color: var(--bg);
  z-index: 1;

  .main-header {
    container: header / inline-size;

    header-inner {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      align-items: center;
      column-gap: var(--sp-20);
      padding-block: var(--sp-12);
      padding-inline: var(--sp-30-16);
      max-width: var(--sp-1440);
      margin-inline: auto;

      >a {
        grid-column: span 4;
        align-self: center;
      }

      >p {
        grid-column: span 4;
      }

      nav {
        grid-column: span 4;

        ul {
          display: flex;
          flex-direction: row;
          column-gap: var(--sp-20);

          li {
            &:last-of-type {
              margin-inline-start: auto;
            }

            a {
              text-decoration: none;
              color: var(--font);

              @media (hover: hover) {
                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }

      >button {
        display: none;
        border: none;
        color: var(--font);
      }

      @container (inline-size < 64rem) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        >p {
          display: none;
        }
      }

      @container (inline-size < 34.375rem) {
        --header-height: var(--sp-56);
        padding-block: var(--sp-16);

        nav {
          position: fixed;
          top: var(--header-height);
          transform: translateX(-100%);
          left: 0;
          width: 100%;
          height: 100svh;
          background-color: var(--bg);
          padding-block: var(--sp-12);
          padding-inline: var(--sp-30-16);
          opacity: 0;
          transition: 
            transform var(--animation-time) var(--animation-timing-function), 
            opacity var(--animation-time) var(--animation-timing-function);

          ul {
            display: flex;
            flex-direction: column;
            gap: var(--sp-20);

            li {
              text-align: right;
              
              a {
                border-inline-end: var(--border);
                padding-inline-end: var(--sp-8);
              }

              &:last-of-type {
                margin-inline-start: 0;
              }
            }
          }
        }
        >button {
          display: block;
        }

        &:has(.nav-open) nav {
          transform: translateX(0);
          opacity: 1;
        }
      }
    }
  }
}