.main-header {
  container: header / inline-size;
  position: sticky;
  top: 0;
  background-color: var(--black);
  z-index: 1;

  &.menu-open {
    .burger-menu {
      span {
        &:nth-of-type(1) {
          transform: translateY(var(--sp-2));
        }

        &:nth-of-type(2) {
          transform: translateY(calc(-1 * var(--sp-2)));
        }
      }
    }

    utility-box {
      transform: translateX(0);
    }
  }

  at-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--sp-16);

    burger-menu {
      display: none;
    }

    utility-box {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    nav {
      ul {
        display: flex;
        flex-direction: row;
        gap: var(--sp-24);

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

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .book-appointment {
      background-color: var(--brand-red);
      color: var(--white);
      padding: var(--sp-12) var(--sp-16);
      margin-inline-start: var(--sp-33);
      transition: 
        background-color var(--anime-time) var(--anime-func), 
        color var(--anime-time) var(--anime-func);

      &:hover {
        background-color: var(--white);
        color: var(--black);
      }
    }

    @container (inline-size < 43.75rem) {
      .burger-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: var(--sp-24);
        height: var(--sp-24);
        gap: var(--sp-4);
        background-color: transparent;
        
        span {
          display: block;
          width: var(--sp-16);
          height: var(--sp-1);
          background-color: var(--white);
          transition: transform var(--anime-time) var(--anime-func);
        }
      }

      utility-box {
        position: fixed;
        top: var(--sp-56);
        left: 0;
        flex-direction: column;
        align-items: end;
        height: 100dvh;
        width: 100vw;
        padding-inline-end: var(--sp-30-16);
        background-color: var(--black);
        transform: translateX(-100%);
        transition: transform var(--anime-time) var(--anime-func);

        ul {
          flex-direction: column;
          align-items: end;
        }

        .book-appointment {
          margin-block-start: var(--sp-24);
        }
      }
    }
  }
}