/**
 * This component implements a headline image. that fills whole page width
 * with a stretched image. Over that the image in normal dimensions is shown.
 */

.c-headline-media {
  position: relative;
  min-height: 420px;
  background: $secondary-color;
  z-index: 1;

  @include breakpoint(medium down) {
    min-height: 250px;
  }

  @include breakpoint(mobile down) {
    min-height: auto;
    min-height: fit-content;
  }
}

.c-headline-media__background {
  z-index: -1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .15;
}

.c-headline-media__body {
  z-index: 1;

  // fixes overflow
  iframe {
    float: left;
    max-width: 100%;
  }
}