.optimus-complex-front header {
  padding: 0 3% 0;
  margin: 0 -3%;
}

.optimus-complex-front header h2 {
  padding: 5px 10px;
  color: var(--swatchMono-black);
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  line-height: 18px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0;
}

.optimus-complex-front header h2.large {
  padding: 15px 10px 10px 10px;
  font-size: 35px;
  font-style: italic;
  letter-spacing: 0.07em;
  font-family: 'gsb', sans-serif;
}

@media screen and (min-width: 533px) and (max-width: 1000px) {
  .optimus-complex-front header h2 {
    padding: 0.5vw 1vw;
    font-size: 1.4vw;
    line-height: 1.8vw;
  }
  .optimus-complex-front header h2.large {
    padding: 0.5vw 1vw 0vw 0.5vw;
    font-size: 3.7vw;
    line-height: 4.2vw;
  }
}

@media screen and (max-width: 532px) {
  .optimus-complex-front header h2 {
    padding: 1vw 1vw;
    font-size: 2.8vw;
    line-height: 3.6vw;
  }
  .optimus-complex-front header h2.large {
    padding: 1.8vw 1vw 1vw 1vw;
    font-size: 4.8vw;
    line-height: 3.7vw;
  }
}

.optimus-complex-front .front {
  transform: scale(0.96);
}

@media screen and (max-width: 532px) {
  .optimus-complex-front .front {
    transform: scale(1);
  }

  .optimus-complex-front {
    box-sizing: border-box;
    margin-left: -3%;
    margin-right: -3%;
    padding: 0 3% 3%;
    margin-bottom: 4.8vw;
  }

  .optimus-complex-front.noHeader {
    padding-top: 3%;
  }

  .optimus-complex-front .front {
    margin-bottom: 0 !important;
  }

  .optimus-complex-front header {
    padding: 0 0 2%;
  }
}

/* So that groups will not disappear 
   when parallax is visible */
.optimus-complex-front {
  position: relative;
  z-index: 3;
}

/* Groups without background in dr.edition get a light gray for display reasons,
   this ensures text color is always set to black at the same time. */
.optimus-complex-front:not([class*='background']) {
  background-color: var(--swatchMono-gray6);
  color: var(--swatchMono-black);
}
/* var(--brick-colors-teaserBg);*/

.optimus-complex-front
  .no-image:not(.with-background-color)
  .body:not([class*='background']) {
  background-color: rgba(255, 255, 255, 0.2);
  color: inherit;
}

.no-image:not(.with-background-color) .body:not([class*='background']) {
  background-color: var(--swatchMono-gray6);
  color: var(--swatchMono-black);
}

.optimus-background-black {
  background-color: var(--swatchMono-black);
  color: var(--swatchMono-white);
}
.optimus-background-black header h2 {
  color: var(--swatchMono-white);
}
.optimus-background-black .vignette,
.optimus-background-black .vignette h3 {
  background-color: var(--swatchMono-black) !important;
}

.optimus-background-yellow {
  background-color: var(--swatchHighlights-yellow);
  color: var(--swatchMono-black);
}

.optimus-background-finance {
  background-color: var(--swatchHighlights-finance);
  color: var(--swatchMono-black);
}

.optimus-complex-front.optimus-custom-one {
  background-color: var(--custom-background-color-one);
  color: var(--custom-background-color-one-front);
}
.optimus-custom-one header h2 {
  color: var(--custom-background-color-one-front);
}

.optimus-complex-front.optimus-custom-two {
  background-color: var(--custom-background-color-two);
  color: var(--custom-background-color-two-front);
}

.optimus-custom-two header h2 {
  color: var(--custom-background-color-two-front);
}

.optimus-complex-front.optimus-custom-three {
  background-color: var(--custom-background-color-three);
  color: var(--custom-background-color-three-front);
}

.optimus-custom-three header h2 {
  color: var(--custom-background-color-three-front);
}

.optimus-complex-front.optimus-background-opinion {
  background-color: var(--opinion-background-color);
  color: var(--opinion-color-front);
}

.optimus-background-opinion header h2 {
  color: var(--opinion-color-front);
}

/* Temporary styling for breaking news icon until it is delivered from brick */
header h2 brick-icon {
  position: relative;
  top: 2px;
  margin-inline-start: calc(var(--brick-space-x1) * 0.2);
  margin-inline-end: calc(var(--brick-space-x1) * 0.3);
}

header h2 brick-icon .svg-wrap {
  --brick--pulseColor70: var(--brick-colors-pillNonePulseStartBg);
  --brick--pulseColor0: var(--brick-colors-pillNonePulseEndBg);
}

header h2 brick-icon svg {
  fill: var(--brick-colors-pillNonePulseBg);
  color: var(--brick-colors-pillNonePulseBg);
  display: inline-flex;
  width: 16px;
  height: 16px;
}

@media screen and (min-width: 500px) {
  header h2 brick-icon {
    top: 3px;
    margin-inline-end: calc(var(--brick-space-x1) * 0.7);
  }

  header h2 brick-icon svg {
    width: 22px;
    height: 22px;
  }
}

/* Overrides for different group background colors */
.optimus-custom-one header h2 brick-icon .svg-wrap {
  --brick--pulseColor70: var(--brick-colors-pillCustomOnePulseStartBg);
  --brick--pulseColor0: var(--brick-colors-pillCustomOnePulseEndBg);
}
.optimus-custom-one header h2 brick-icon svg {
  fill: var(--brick-colors-pillCustomOnePulseBg);
  color: var(--brick-colors-pillCustomOnePulseBg);
}

.optimus-custom-two header h2 brick-icon .svg-wrap {
  --brick--pulseColor70: var(--brick-colors-pillCustomTwoPulseStartBg);
  --brick--pulseColor0: var(--brick-colors-pillCustomTwoPulseEndBg);
}
.optimus-custom-two header h2 brick-icon svg {
  fill: var(--brick-colors-pillCustomTwoPulseBg);
  color: var(--brick-colors-pillCustomTwoPulseBg);
}

.optimus-background-black header h2 brick-icon .svg-wrap {
  --brick--pulseColor70: var(--brick-colors-pillBlackPulseStartBg);
  --brick--pulseColor0: var(--brick-colors-pillBlackPulseEndBg);
}
.optimus-background-black header h2 brick-icon svg {
  fill: var(--brick-colors-pillBlackPulseBg);
  color: var(--brick-colors-pillBlackPulseBg);
}

.optimus-background-yellow header h2 brick-icon .svg-wrap {
  --brick--pulseColor70: var(--brick-colors-pillHighlightPulseStartBg);
  --brick--pulseColor0: var(--brick-colors-pillHighlightPulseEndBg);
}
.optimus-background-yellow header h2 brick-icon svg {
  fill: var(--brick-colors-pillHighlightPulseBg);
  color: var(--brick-colors-pillHighlightPulseBg);
}

/* bandage for brick-carousel width-bug */
.optimus-complex-front amedia-include[rendered='true']:has(brick-carousel) {
  overflow: hidden;
}