/*!*****************************************************************************************************************************************************************************************!*\
  !*** 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/Contact/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 */

@media screen and (width >= 1024px) {
    [name='Contact'] .wrapper {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--gutter);
    }

      [name='Contact'] .wrapper .content {
        grid-column: span 5;
      }

      [name='Contact'] .wrapper .contact {
        grid-column: 7 / -1;
      }
  }

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

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

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

[name='Contact'] .contact {
    position: relative;
  }

[name='Contact'] .contact-infos > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
  }

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

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

[name='Contact'] .contact-infos {

    background-color: var(--clr-white);
    padding: 4px 40px 12px 20px;
}

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

[name='Contact'] .contact-infos {
      position: absolute;
      left: 20px;
      bottom: 20px
  }
    }

[name='Contact'] .contact-infos h2,
    [name='Contact'] .contact-infos h3,
    [name='Contact'] .contact-infos h4,
    [name='Contact'] .contact-infos p {
      margin-bottom: 8px;
    }

[name='Contact'] .contact-infos .contact-name {
      font-family: var(--ff-heading);
      font-weight: 500;
      line-height: 34px;
    }

[name='Contact'] .contact-infos .icon {
      width: 24px;
      height: 24px;
    }

[name='Contact'] .button-tertiary {
    --color: var(--clr-blue);
  }

[name='Contact'] .button-tertiary:hover {
      --color: var(--clr-black);
    }


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