.campaign-articles {
  @extend %flexbox-column;
  border: 1px solid $color-tui-beige;
  border-radius: $border-radius-double;
  padding: $margin-normal;

  @include breakpoint(lg) {
    flex-direction: row;
  }
}

@include breakpoint(lg) {
  .campaign-article:only-child {
    width: 100%;
    align-items: center;

    .illustration {
      margin-right: $margin-triple;
    }

    .travelife {
      width: 249px;
      height: auto;
    }

    .campaign-link {
      display: inline-flex;

      &:last-child {
        margin-left: $margin-triple;
      }
    }
  }

  .num-of-articles-1 {
    .valid-to {
      display: inline-block;
    }
  }

  .num-of-articles-2 {
    .campaign-article {
      width: calc(50% - 6px);

      &:first-child {
        margin: 0 $margin-half 0 0;
      }

      &:last-child {
        margin: 0 0 0 $margin-half;
      }
    }
  }

  .num-of-articles-3 {
    .campaign-article {
      flex-direction: column;
      align-items: center;
      width: 33%;
      margin: 0;

      &:first-child {
        margin: 0 $margin-normal 0 0;
      }

      &:last-child {
        margin: 0 0 0 $margin-normal;
      }

      .illustration {
        margin-right: 0;
        margin-bottom: $margin-double;
      }

      .text {
        align-items: center;
        text-align: center;
      }

      .campaign-link {
        justify-content: center;
      }
    }
  }
}