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

[name='Contact'] .contact {
    --portrait-image-size: 200px;

    display: flex;
    gap: 24px;
    flex-direction: column;
  }

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

[name='Contact'] .contact {
      align-items: center;
      flex-direction: row;
      gap: 32px
  }
    }

[name='Contact'] .contact .contact-image {
      flex-shrink: 0;
    }

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

[name='Contact'] .contact .contact-image {
        padding-inline-end: var(--column-gutter)
    }
      }

[name='Contact'] .contact .contact-image figure {
        height: var(--portrait-image-size);
        overflow: hidden;
        width: var(--portrait-image-size);
      }

[name='Contact'] .contact .contact-image figure img {
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
          width: 100%;
        }

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

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

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

[name='Contact'] .contact .contact-description {
      max-width: 800px;
}

[name='Contact'] .contact .contact-description .contact-name {
        margin-block-end: 8px;
      }

[name='Contact'] .contact .contact-description .contact-name::after {
          display: none;
        }

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

[name='Contact'] .contact .contact-info {
        padding-block-start: 0
    }
      }

[name='Contact'] .contact .contact-info .contact-info-details {
        margin-block-start: 16px;
      }

[name='Contact'] .contact .contact-info .contact-info-phoneList,
      [name='Contact'] .contact .contact-info .contact-info-emailList {
        @include reset-list();
      }

[name='Contact'] .contact .contact-info .contact-info-phoneList:not(:last-child), [name='Contact'] .contact .contact-info .contact-info-emailList:not(:last-child) {
          margin-block-end: 16px;
        }

[name='Contact'] .contact .contact-info .contact-info-phone,
      [name='Contact'] .contact .contact-info .contact-info-email {
        align-items: center;
        color: var(--clr-link);
        display: flex;
        text-decoration: none;
      }

[name='Contact'] .contact .contact-info .contact-info-phone:hover,
        [name='Contact'] .contact .contact-info .contact-info-phone:focus-visible,
        [name='Contact'] .contact .contact-info .contact-info-email:hover,
        [name='Contact'] .contact .contact-info .contact-info-email:focus-visible {
          text-decoration: underline;
        }

[name='Contact'] .contact .contact-info .contact-info-phone:not(:last-child), [name='Contact'] .contact .contact-info .contact-info-email:not(:last-child) {
          margin-block-end: 16px;
        }

[name='Contact'] .contact .contact-info .contact-info-icon {
        display: inline-block;
        height: 24px;
        margin-inline-end: 16px;
        width: 24px;
      }

[name='Contact'] .contact .contact-info .contact-info-icon svg {
          width: 100%;
        }

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

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

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

[name='Contact'] .contacts-list-item:has(+ .contacts-list-item) {
    margin-block-end: 32px;
  }


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