/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/templates/paragraph/callout-horizontal/component/paragraph.callout-horizontal.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.callout-horizontal__cta-link a {
  display: inline;
  line-height: 1;
  background-image: linear-gradient(0deg, var(--animate-underline--underline-color, var(--underline--color)) 0%, var(--animate-underline--underline-color, var(--underline--color)) 100%);
  background-size: var(--animate-underline--bg-size--width, 0%) var(--animate-underline--bg-size--thickness, 2px);
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: var(--animate-underline--bg-position-x, right);
  transition: all 200ms ease-in-out;
}
.callout-horizontal__cta-link a:hover, .callout-horizontal__cta-link a:focus {
  --animate-underline--bg-size--width: var(--animate-underline--bg-size--width--active);
}

.callout-horizontal__cta-link a {
  --animate-underline--bg-size--width: 100%;
  --animate-underline--bg-size--width--active: 0%;
}

.callout-horizontal__cta-link a {
  --animate-underline--underline-color: var(--cta-secondary--underline-color);
  font-size: 1rem;
  display: inline;
  font-family: "Mallory";
  font-weight: 700;
  text-transform: uppercase;
}

.callout-horizontal__cta-link a {
  color: var(--cta-secondary--color);
}

.callout-horizontal__title {
  font-size: var(--heading--font-size);
  color: var(--heading--color);
  line-height: var(--heading--line-height, 1.2);
  font-family: var(--heading--font-family, YaleNew);
  font-weight: var(--heading--font-weight, 400);
  text-transform: var(--heading--text-transform);
  transition: var(--heading--transition, all 200ms ease-in-out);
  margin-top: var(--heading--margin-top);
  margin-bottom: var(--heading--margin-bottom);
}
.callout-horizontal__title:first-child {
  --heading--margin-top: 0;
}

.callout-horizontal__title {
  --heading--font-size: var(--h3--font-size, clamp(1.5390234037rem, 1.4597348715rem + 0.3964426606vw, 1.776889rem));
}

.callout-horizontal__body a {
  display: inline;
  text-decoration-line: var(--_animate-text-decoration--line);
  text-decoration-thickness: var(--animate-text-decoration--thickness, 1px);
  text-underline-offset: var(--_animate-text-decoration--offset, 0.25em);
  text-decoration-color: var(--animation-text-decoration-color, var(--underline--color));
}
.callout-horizontal__body a {
  --_animate-text-decoration--line: underline;
}

.callout-horizontal__body a:hover, .callout-horizontal__body a:focus {
  text-decoration-line: var(--_animate-text-decoration--line--active, var(--_animate-text-decoration--line, underline));
  text-decoration-thickness: var(--animate-text-decoration--thickness--active, var(--animate-text-decoration--thickness, 1px));
  text-underline-offset: var(--_animate-text-decoration--offset--active, var(--_animate-text-decoration--offset, 0.125em));
}

.callout-horizontal {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "image" "content";
}
.callout-horizontal [data-color-scheme-callout] {
  padding: 31.984002px;
  color: var(--text--color);
  background-color: var(--bg-color);
}
.callout-horizontal__content {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: content;
  display: flex;
  flex-direction: column;
  margin-top: calc(56.8320213298px * -1);
  position: relative;
  row-gap: 23.994px;
  z-index: 1;
}
.callout-horizontal.callout-horizontal--image-right > .callout-horizontal__content {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
}
.callout-horizontal.callout-horizontal--image-left > .callout-horizontal__content {
  -ms-grid-row: 1;
  -ms-grid-column: 8;
  -ms-grid-column-span: 5;
}
.callout-horizontal__title {
  --heading--font-weight: 700;
}
.callout-horizontal__image {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  --img--object-fit: cover;
  --img--height: 100%;
  --img--width: 100%;
  grid-area: image;
}
.callout-horizontal.callout-horizontal--image-right > .callout-horizontal__image {
  -ms-grid-row: 1;
  -ms-grid-column: 6;
  -ms-grid-column-span: 7;
}
.callout-horizontal.callout-horizontal--image-left > .callout-horizontal__image {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
}
.callout-horizontal__image > * {
  height: 100%;
}
.callout-horizontal__cta-link {
  margin-top: auto;
}
@container (width > 768px) {
  .callout-horizontal {
    grid-template-columns: repeat(12, 1fr);
  }
  .callout-horizontal .callout-horizontal__content {
    margin-block: 56.8320213298px;
    margin-inline: 0;
  }
}
.callout-horizontal.callout-horizontal--image-right .callout-horizontal__content {
  margin-right: 42.634674666px;
}
@container (width > 768px) {
  .callout-horizontal.callout-horizontal--image-right {
    grid-template-areas: "content content content content content image image image image image image image";
  }
  .callout-horizontal.callout-horizontal--image-right .callout-horizontal__image {
    margin-left: calc(42.634674666px * -1);
  }
  .callout-horizontal.callout-horizontal--image-right .callout-horizontal__content {
    margin-right: calc(42.634674666px * -1);
  }
}
.callout-horizontal.callout-horizontal--image-left .callout-horizontal__content {
  margin-left: 42.634674666px;
}
@container (width > 768px) {
  .callout-horizontal.callout-horizontal--image-left {
    grid-template-areas: "image image image image image image image content content content content content";
  }
  .callout-horizontal.callout-horizontal--image-left .callout-horizontal__image {
    margin-right: calc(42.634674666px * -1);
  }
  .callout-horizontal.callout-horizontal--image-left .callout-horizontal__content {
    margin-left: calc(42.634674666px * -1);
  }
}