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

:root {
  --clr-primary: #00634e;
  --clr-primary-rgb: 0, 99, 78;
  --clr-grey: #f4f4f4;
  --clr-secondary: var(--clr-grey);
  --clr-tertiary: #9dcff0;
  --clr-fourth: #7eb975;
  --clr-fifth: #fae46b;
  --clr-sixth: #e08982;
  --clr-accent: var(--clr-grey);
  --clr-grey-200: #ddd;
  --clr-grey-500: #a5b2af;
  --clr-grey-900: #373d42;
  --clr-grey-dark: #666766;
  --clr-grey-dark-muted: #898989;
  --clr-error: #e56b6b;
  --clr-success: var(--clr-fourth);
  --clr-warning: var(--clr-fifth);
  --clr-info: var(--clr-tertiary);
  --clr-white: #fff;
  --clr-black: #121211;
  --clr-pure-black: #000;
  --clr-muted: #dddfe4;
  --clr-muted-transparent: var(--clr-grey);
  --clr-border: transparent;
  --clr-list-marker: var(--clr-primary);
  --clr-marker: var(--clr-primary);
  --clr-headline: var(--clr-text);
  --clr-text: var(--clr-black);
  --clr-text-secondary: var(--clr-white);
  --clr-text-muted: var(--clr-grey-dark-muted);
  --clr-link: var(--clr-text);
  --clr-divider: var(--clr-secondary);
  --clr-label: var(--clr-text);
  --bg-clr-page: #f8fafb;
  --bg-clr-one: var(--clr-white);
  --bg-clr-two: var(--clr-secondary);
  --bg-clr-three: var(--clr-tertiary);
  --bg-clr-four: var(--clr-fourth);
  --bg-clr-five: var(--clr-fifth);
  --bg-clr-six: var(--clr-sixth);
  --bg-clr-seven: var(--clr-primary);
  --bg-clr-eight: #a73d3e;
  --bg-clr-nine: #ebd9b6;
  --bg-clr-ten: #c5e1a5;
  --bg-clr-eleven: #e9c099;
  --bg-clr-input: var(--clr-white);
  --clr-input: var(--clr-grey-dark-muted);
  --border-clr-input: var(--clr-text);
  --underline-color: var(--clr-primary);
}

/** Checkbox and Radio Mixins */

@layer components {
  [name='EventHeader'] {
    padding-block: var(--space-section);

  }

    [name='EventHeader'] .header-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md, 32px);
    }

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

    [name='EventHeader'] .header-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--gutter);
        align-items: start
    }
      }

    [name='EventHeader'] .info-column {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm, 24px);
    }

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

    [name='EventHeader'] .info-column {
        grid-column: 1 / span 4
    }
      }
      [name='EventHeader'] .heading-group .kicker {
        display: block;
        color: var(--clr-primary);
        font-size: var(--fs-xsmall);
        line-height: 16px;
        margin-block-end: 4px;
      }

      [name='EventHeader'] .heading-group .title {
        font-family: var(--ff-base);
        font-size: var(--fs-h3);
        font-weight: var(--fw-semibold);
        line-height: var(--lh-h3);
        margin: 0;
      }

    [name='EventHeader'] .meta-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    [name='EventHeader'] .meta-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #e8e6e6;
      border-radius: 6px;
      padding: 4px 12px;
      font-size: var(--fs-base);
      font-weight: var(--fw-semibold);
      line-height: var(--lh-base);
    }

      [name='EventHeader'] .meta-tag .meta-icon {
        inline-size: 20px;
        block-size: 20px;
        flex-shrink: 0;
      }
      [name='EventHeader'] .description > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
  }
      [name='EventHeader'] .description > :last-child:not([class*='button']) {
    margin-block-end: 0;
    padding-block-end: 0;
  }
      [name='EventHeader'] .description > h2,
  [name='EventHeader'] .description > h3,
  [name='EventHeader'] .description > h4,
  [name='EventHeader'] .description > h5,
  [name='EventHeader'] .description > h6 {
    margin-block-start: 0;
  }

      [name='EventHeader'] .description p:first-child {
        font-size: var(--fs-lead, 22px);
        line-height: var(--lh-lead, 28px);
        margin-block-end: var(--space-sm, 24px);
      }

      [name='EventHeader'] .description p + p {
        font-size: var(--fs-base);
        line-height: var(--lh-base);
      }

    [name='EventHeader'] .media-column {
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: flex-start;
    }

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

    [name='EventHeader'] .media-column {
        grid-column: 6 / -1;
        padding-block-start: 20px
    }
      }

    [name='EventHeader'] .image {
      border-radius: 6px;
      overflow: hidden;
      inline-size: 100%;
    }

      [name='EventHeader'] .image [name='ElementImage'],
      [name='EventHeader'] .image picture,
      [name='EventHeader'] .image img {
        inline-size: 100%;
        block-size: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }
}


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