/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./blocks/content-graphic/content-graphic.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
.content-graphic {
  position: relative;
  background-size: cover;
  background-position: center;
}
.acf-block-preview > .content-graphic {
  background: transparent !important;
}
.acf-block-preview > .content-graphic .page-graphic-element, .acf-block-preview > .content-graphic::before {
  display: none !important;
  color: var(--color-black);
}

.content-graphic:not([data-background=transparent], [data-background=violet]) {
  color: var(--color-white);
}
:where(.content-graphic:not([data-background=transparent], [data-background=violet])) a {
  color: var(--color-white);
  text-decoration: none;
}
:where(.content-graphic:not([data-background=transparent], [data-background=violet])) a:is(:hover, :focus, :active) {
  text-decoration: underline;
  color: var(--color-white);
}

.content-graphic:not([data-background=transparent])::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.content-graphic[data-background=violet-gradient]::before {
  background: var(--gradient-purple);
}
.content-graphic[data-background=violet-vertical-gradient]::before {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(-9.49%, #fc4d07), color-stop(107.77%, #6e1ed9));
  background: linear-gradient(180deg, #fc4d07 -9.49%, #6e1ed9 107.77%);
}
.content-graphic[data-background=blue-gradient]::before {
  background: var(--gradient-blue);
}
.content-graphic[data-background=blue-vertical-gradient]::before {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.85%, #89f9ff), color-stop(101.32%, #2979f0));
  background: linear-gradient(180deg, #89f9ff 0.85%, #2979f0 101.32%);
}
:where(.content-graphic[data-background=violet]) a {
  color: var(--color-violet);
}
.content-graphic[data-background=violet]::before {
  background: var(--color-light-violet);
}
.content-graphic[data-background=dark-grey]::before {
  background: var(--color-dark-grey);
}
.content-graphic[data-background-image]::before {
  opacity: 0.7;
}
.content-graphic:not([data-background=transparent]) > .blocks-container > *:first-child {
  margin-top: 0;
  padding-top: var(--section-spacing);
}
.content-graphic:not([data-background=transparent]) > .blocks-container > *:last-child {
  margin-bottom: 0;
  padding-bottom: var(--section-spacing);
}
.content-graphic:is([data-background=violet-gradient], [data-background=violet-vertical-gradient]) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-white);
}
.content-graphic:is([data-background=dark-grey]) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-turquoise);
}
.content-graphic:is([data-background=violet-gradient], [data-background=violet-vertical-gradient], [data-background=dark-grey]) :is(a, button) {
  color: var(--color-turquoise);
}
.content-graphic:is([data-background=violet-gradient], [data-background=violet-vertical-gradient], [data-background=dark-grey]) :is(button.active) {
  color: var(--color-orange);
}
.content-graphic:is([data-background=violet-gradient], [data-background=violet-vertical-gradient], [data-background=dark-grey]) :is(a, button):is(:active, :hover) {
  color: var(--color-orange);
}
.content-graphic:is([data-background=blue-gradient], [data-background=blue-vertical-gradient]) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-violet);
}
.content-graphic .page-graphic-element {
  pointer-events: none;
}
.content-graphic .page-graphic-element svg {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  z-index: 20;
}
.content-graphic .page-graphic-element[data-vertical=top] svg {
  top: -0.1rem;
}
.content-graphic .page-graphic-element[data-vertical=top]:is([data-style="5"], [data-style="6"], [data-style="7"], [data-style="8"]) svg {
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.content-graphic .page-graphic-element[data-vertical=bottom] svg {
  bottom: -0.1rem;
}
.content-graphic .page-graphic-element[data-vertical=bottom]:is([data-style="5"], [data-style="6"], [data-style="7"], [data-style="8"]) svg {
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.content-graphic .page-graphic-element[data-color=violet] svg path {
  fill: var(--color-light-violet);
}

/*# sourceMappingURL=content-graphic.css.map*/