/*!****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./components/static/Header/style.css ***!
  \****************************************************************************************************************************************************************************************/
/**
 * Custom Media Queries
 * Works like Custom Properties, except for media queries.
 *
 * @link: https://drafts.csswg.org/mediaqueries-5/#custom-mq
 * @link: https://github.com/postcss/postcss-custom-media
 **/

/* Min-Width */

/* Customize based on project */

/* Max-Width */

/* Customize based on project */

/* Min-Max-Width */

[name='Header'] {
  align-items: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: 16px;
  width: 100%;
}

@media screen and (width >= 1024px) {

[name='Header'] {
    padding-block: 24px
}
  }

[name='Header'] .logo-wrapper {
    grid-column: 1 / 5;
    grid-row: 1;
  }

@media screen and (width < 1024px) {

[name='Header'] .logo-wrapper {
      text-align: center;
      margin-right: auto
  }
    }

@media screen and (width >= 1024px) {

[name='Header'] .logo-wrapper {
      grid-column: span 2
  }
    }

[name='Header'] .logo {
    display: inline-block;
    width: 112px;
  }

@media screen and (width >= 1024px) {

[name='Header'] .logo {
      width: 150px
  }
    }

[data-header-position='scrolled'] [name='Header'] .navbar > .menubar > li > a:not([class*='button']):hover {
            color: var(--clr-secondary);
          }

[name='Header'] [name='MainNavigation'] {
    grid-column: 1 / 5;
    grid-row: 1;
    justify-self: end;
  }

@media screen and (width >= 1024px) {

[name='Header'] [name='MainNavigation'] {
      grid-column: span 2
  }
    }

@media screen and (width >= 1024px) {

[name='Header'] {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter)
}

    [name='Header'] .logo-wrapper {
      grid-column: span 2;
    }

    [name='Header'] [name='MainNavigation'] {
      grid-column: span 6;
    }

    [name='Header'] [name='AppMenu'] {
      grid-column: span 4;
      width: 100%;
    }
  }


/*# sourceMappingURL=style.min.css.map*/