@use "../variables";

.fwe-teaser-horbox {
  display: flex;
  background-color: var(--fwe-sucanul);
}

.fwe-teaser-horbox .fwe-teaser-horbox-img {
  background-color: var(--fwe-hero);
  flex: 1;
}

.fwe-teaser-horbox .fwe-teaser-horbox-content {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  padding: 24px;
}

.fwe-teaser-horbox .fwe-teaser-horbox-content .fwe-teaser-more {
  align-self: flex-end;
}

.fwe-teaser-verbox {
  display: inline-flex;
  flex-direction: column;
  background-color: var(--fwe-sucanul);
  width: 100%;
  height: 100%;
}

.fwe-teaser-verbox .fwe-teaser-verbox-img {
  background-color: var(--fwe-hero);
  height: calc(50% - 12px);
  min-height: 186px;
  width: 100%;
}

.fwe-teaser-verbox h2 {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
}

.fwe-teaser-verbox p {
  padding-left: 24px;
  padding-right: 24px;
}

.fwe-teaser-verbox .fwe-teaser-more {
  align-self: flex-end;
  margin-bottom: 24px;
  margin-right: 24px;
}

.fwe-teaser-c12-container {
  display: flex;
  flex-direction: column;

  .fwe-teaser-c12-content {
    order: 2;
    background-color: variables.$sucanul;
    padding-top: 16px;
    padding-bottom: 13px;
    padding-left: 20px;
    padding-right: 20px;

    h3,
    .fwe-h3 {
      font-size: 12px;
      line-height: 14px;
      margin-bottom: 4px;
      font-weight: variables.$font-weight-normal;
    }

    h2,
    .fwe-h2 {
      font-size: 16px;
      line-height: 24px;
      font-weight: variables.$font-weight-bold;
      margin-top: 0;
    }
  }

  .fwe-teaser-c12-img {
    order: 1;
    background-color: variables.$hero;
    min-height: 114px;
  }
}

@media only screen and (min-width: variables.$grid-breakpoint-md) {
  .fwe-teaser-verbox h2 {
    padding-top: 48px;
  }
}