@use "../variables";

@use "sass:math";

.fwe-header-modul-container {
  display: flex;
  flex-direction: column;
  padding-top: variables.$spacer-l;
  padding-bottom: variables.$spacer-l;

  .fwe-header-modul-content {
    order: 2;
    position: relative;

    h1,
    .fwe-h1 {
      margin-bottom: 0;
    }

    h3,
    .fwe-h3 {
      margin-top: 0;
      margin-bottom: 16px;
    }

    p {
      font-size: variables.$font-size-xl;
      line-height: 32px;
      color: variables.$text-light;
      margin: 0;
      padding-bottom: 34px;
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 28px;
      height: 10px;
      background-color: variables.$gray-400;
    }
  }

  .fwe-header-modul-media {
    min-height: 111px;
    background-color: variables.$hero;
    order: 1;
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-xs) {
  .fwe-header-modul-container {
    .fwe-header-modul-media {
      min-height: 132px;
    }
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-sm) {
  .fwe-header-modul-container {
    .fwe-header-modul-content {
      h1,
      .fwe-h1 {
        margin-bottom: 6px;
      }
    }
    .fwe-header-modul-media {
      min-height: 268px;
    }
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-md) {
  .fwe-header-modul-container {
    .fwe-header-modul-media {
      min-height: 352px;
    }
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-lg) {
  .fwe-header-modul-container {
    flex-direction: row;

    .fwe-header-modul-content {
      order: 1;
      width: math.div(100%, 2.4);
      margin-right: variables.$spacer-m;

      h1,
      .fwe-h1 {
        margin-top: 0;
      }
    }

    .fwe-header-modul-media {
      order: 2;
      min-height: 293px;
      flex: 1;
    }
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-xl) {
  .fwe-header-modul-container {
    .fwe-header-modul-media {
      min-height: 400px;
    }
  }
}