/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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]!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/templates/paragraph/cta-banner/component/paragraph.cta-banner.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
.cta-banner__cta-link a {
  --focus-visible--outline-color: #4678BA;
  background-color: var(--cta-primary--bg-color, #263b97);
  color: var(--cta-primary--color, #ffffff);
  font-weight: var(--cta-primary--font-weight);
  font-size: var(--cta-primary--font-size);
  text-decoration: none;
  padding: 0.375em 0.75em;
  border: 1px solid transparent;
}
.cta-banner__cta-link a:hover, .cta-banner__cta-link a:focus {
  background-color: var(--cta-primary--bg-color--active, #4678BA);
  color: var(--cta-primary--color--active, var(--cta-primary--color, #ffffff));
}

.cta-banner {
  position: relative;
  align-items: center;
  display: grid;
  isolation: isolate;
  -moz-column-gap: 25.92px;
       column-gap: 25.92px;
  row-gap: 18px;
  grid-template-areas: "p-img" "p-text" "p-cta";
}
.cta-banner:hover, .cta-banner:focus-within {
  --text--color: #ffffff;
  --a--color: #ffffff;
}
.cta-banner__body {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  --p--max-width: 100%;
  grid-area: p-text;
  z-index: 1;
}
.cta-banner__cta-link {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: p-cta;
  margin-right: 18px;
  z-index: 2;
}
.cta-banner__cta-link a {
  --cta-primary--font-weight: 600;
  --cta-primary--bg-color--active: #ffffff;
  --cta-primary--color--active: #4678BA;
}
@container (width > 768px) {
  .cta-banner__cta-link a::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .cta-banner__cta-link a:focus-visible {
    --focus-visible--outline-color: transparent;
  }
  .cta-banner__cta-link a:focus-visible::after {
    --focus-visible--outline-color: #4678BA;
    outline: var(--focus-visible--outline-width, 4px) var(--focus-visible--outline-style, solid) var(--focus-visible--outline-color, currentColor);
    outline-offset: var(--focus-visible--outline-offset, 4px);
    transition: all 200ms ease-in-out;
  }
}
.cta-banner__fg-image, .cta-banner__bg-image {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  --img--height: 100%;
  --img--object-fit: cover;
  --img--object-position: right;
  grid-area: p-img;
}
.cta-banner__fg-image {
  align-self: stretch;
  z-index: 1;
}
.cta-banner__fg-image img {
  --img--width: 100%;
  aspect-ratio: 2/1;
}
.cta-banner__bg-image {
  align-self: stretch;
  display: none;
  grid-column-end: -1;
  justify-content: end;
  z-index: 1;
  opacity: 0.2;
}
@container (width > 768px) {
  .cta-banner__bg-image {
    display: flex;
  }
}
.cta-banner__bg {
  overflow: hidden;
  grid-column: 1/-1;
  grid-row: 1/-1;
  position: absolute;
  inset: 0;
  background-color: #ffffff;
}
.cta-banner__bg::after {
  background-color: #263b97;
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  rotate: 45deg;
  scale: 0;
  transition: all 200ms ease-in-out;
  z-index: 0;
}
@container (width > 768px) {
  .cta-banner {
    grid-template-areas: "p-img p-text p-cta";
    grid-template-columns: minmax(100px, 1fr) minmax(300px, 2fr) max-content;
  }
  .cta-banner:hover .cta-banner__bg::after, .cta-banner:focus-within .cta-banner__bg::after {
    opacity: 0.85;
    scale: 7;
  }
}