iframe Header

.iframe-header {
  .section > & {
    margin-bottom: -6rem;
  }
}

.iframe-header__top {
  height: 6.8rem;
  margin: 0 auto 6.4rem;
  max-width: $page-max-width;
  position: relative;

  &::before {
    background: $color-dark;
    content: '';
    height: 100%;
    position: absolute;
    transition: opacity 0.2s;
    width: 100%;
  }

  @include mq($from: header) {
    height: 12.5rem;
    margin: 0 auto 7.4rem;
  }
}

.iframe-header__top__bg-shape {
  &::after,
  &::before {
    bottom: -2.4rem;
    content: '';
    display: block;
    height: 2.5rem;
    position: absolute;

    @include mq($from: header) {
      bottom: -3.4rem;
      height: 3.4rem;
    }
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 34"><defs/><path fill="' + $color-dark + '" d="M-695.5-24h1440V.14H50.04a20 20 0 0 0-14.21 5.92l-21.8 22.01A20 20 0 0 1-.18 34H-695.5v-58z"/></svg>');
    left: calc(50% - 2rem);
    width: 4rem;

    @include mq($from: header) {
      left: calc(50% - 2.5rem);
      width: 5rem;
    }
  }

  &::before {
    background: $color-dark;
    left: 0;
    width: calc(50% - 2rem);

    @include mq($from: header) {
      width: calc(50% - 2.5rem);
    }
  }
}

.iframe-header__top__logo {
  left: 1.5rem;
  position: absolute;
  top: 2rem;
  width: 25.5rem;

  @include mq($from: m) {
    left: 3rem;
    width: 32rem;
  }

  @include mq($from: header) {
    left: 9rem;
    top: 4.9rem;
    width: 40.4rem;
  }
}

.iframe-header__content {
  padding: 0 1.5rem;

  @include mq($from: m) {
    padding: 0 3rem;
  }

  @include mq($from: xl) {
    padding: 0 9rem;
  }
}

.iframe-header__content__inner {
  margin: 0 auto;
  max-width: 127rem;
  position: relative;
}

.iframe-header__headline {
  margin-bottom: 1rem;
}

.iframe-header__headline,
.iframe-header__text {
  max-width: 80rem;
}