.header {
  align-items: center;
  background-color: var(--color-primary);

  display: flex;
  flex-direction: column;
  justify-content: center;

  .header-top {
    width: 100%;

    @media (width < 1024px) {
      padding: var(--space-md);
    }

    @media (width >= 1024px) {
      padding: var(--space-xl);
    }

    .header-top__inner {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-inline: auto;
      max-width: var(--l-max-width);
      width: 100%;

      .nav-trigger {
        @media (width >= 1024px) {
          display: none;
        }
      }
    }
  }

  .header-bottom {
    position: relative;
    width: 100%;
  }
}