/*!*******************************************************************************************************************************************************************************************!*\
  !*** 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/JobHeader/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='JobHeader'] .title {
    font-size: 35px;
    font-weight: 400;
    line-height: 40px;
    margin-block-end: 40px;
  }

[name='JobHeader'] .content > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
  }

[name='JobHeader'] .content > :last-child:not([class*='button']) {
    margin-block-end: 0;
    padding-block-end: 0;
  }

[name='JobHeader'] .content > h2,
  [name='JobHeader'] .content > h3,
  [name='JobHeader'] .content > h4,
  [name='JobHeader'] .content > h5,
  [name='JobHeader'] .content > h6 {
    margin-block-start: 0;
  }

[name='JobHeader'] .content > *:last-child :not(.whatsapp-button) > :last-child {
    margin-block-end: 0;
    padding-block-end: 0;
  }

[name='JobHeader'] .attrs {
    @include reset-list;

    display: inline-flex;
    flex-wrap: wrap;
    gap: 24px 40px;
  }

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

[name='JobHeader'] .attrs {
      gap: 80px
  }
    }

[name='JobHeader'] .attrs + .attrs {
      margin-block-start: 8px;
    }

[name='JobHeader'] .attrs .attrs-term {
      display: inline-flex;
      flex-direction: column;
    }

[name='JobHeader'] .attrs .attrs-term span.headline {
        font-weight: var(--fw-semibold);
        color: var(--clr-grey-700);
        display: block;
      }

[name='JobHeader'] .attrs .attrs-term span {
        color: var(--clr-black);
        display: inline-block;
        font-weight: var(--fw-regular);
      }

[name='JobHeader'] .desktop-navigation-wrapper {
    display: none;
  }

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

[name='JobHeader'] .desktop-navigation-wrapper {
      display: flex;
      gap: 40px;
      align-items: center;
      margin-block-start: 32px
  }
    }

[name='JobHeader'] + .mobile-navigation-wrapper {
    display: flex;
    gap: 16px;
    padding: var(--box-padding);
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    inset: auto 0 0;
    z-index: 3;
  }

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

[name='JobHeader'] + .mobile-navigation-wrapper {
      flex-direction: row;
      gap: 24px
  }
    }

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

[name='JobHeader'] + .mobile-navigation-wrapper {
      display: none
  }
    }

[name='JobHeader'] .whatsapp-button {
    --clr-border: var(--clr-white);
    --bg-color: var(--clr-white);
    --color: var(--clr-black);
  }

[name='JobHeader'] .whatsapp-button:hover,
    [name='JobHeader'] .whatsapp-button:focus-visible {
      --clr-border: var(--clr-black);
      --bg-color: var(--clr-black);
      --color: var(--clr-white);
    }


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