@mixin article-style(
  $article-background-url,
  $article-background-color,
  $article-content-background-size,
  $article-padding-sizes,
  $article-content-padding-sizes,
  $article-header-color,
  $article-content-background-color,
  $article-content-background-image,
  $article-text-color,
  $article-header-align,
  $article-text-align,
  $article-input-border-color
){
  padding: $article-padding-sizes;
  background-image: $article-background-url;
  background-color: $article-background-color;
  background-size: cover;
  background-position: center;
  .excerpt-content {
    background-color: $article-content-background-color;
    background-image: $article-content-background-image;
    background-size: $article-content-background-size;
    background-position: center;
    padding: $article-content-padding-sizes;
    position: relative;
    border-radius: 3px;
    .article-close-button {
      position: absolute;
      right: 32px;
      top: 32px;
      font-size: 20px;
      display: inline-block;
      padding: 0;
    }
    .title {
      color: $article-header-color;
      text-align: $article-header-align;
      font-size: (22em / 16);
      line-height: (28em / 22);
      font-weight: bold;
    }
    .divider {
      margin-top: 24px;
      margin-bottom: 22px;
    }
    .text {
      color: $article-text-color;
      text-align: $article-text-align;
      display: block;
      font-size: (16em / 16);
      line-height: (24em / 16);
      font-weight: 600;
      margin-bottom: (20em / 16);
    }
    .icon {
      img {
        width: 45px;
        height: auto;
        margin-bottom: 8px;
      }
    }

    .article-input {
        input {
          background-color: transparent;
          border-color: $article-input-border-color;
          font-size: (16em / 16);
          line-height: (19em / 16);
          font-weight: bold;
          border-width: 0 0 (2em / 16) 0;
          margin-bottom: 0;
          &:hover, &:focus {
              border-color: $article-header-color;
          }
        }
    }
  }
}

.article-won-challenge-excerpt {
  @include article-style(
      $article-background-url: url('/images/grey-icons-background.png'),
      $article-background-color: $off-white,
      $article-content-background-size: cover,
      $article-padding-sizes: 32px,
      $article-content-padding-sizes: 40px 24px,
      $article-header-color: $dark-mint,
      $article-content-background-color: $white,
      $article-content-background-image: none,
      $article-text-color: $charcoal,
      $article-header-align: center,
      $article-text-align: center,
      $article-input-border-color: transparent
  )
}

.article-mailing-list-excerpt {
  @include article-style(
      $article-background-url: none,
      $article-background-color: $off-white,
      $article-content-background-size: 1400px,
      $article-padding-sizes: 32px,
      $article-content-padding-sizes: 28px 32px,
      $article-header-color: $honey,
      $article-content-background-color: $charcoal,
      $article-content-background-image: url('/images/bg-black-host.png'),
      $article-text-color: $white,
      $article-header-align: left,
      $article-text-align: left,
      $article-input-border-color: $mint
  )
}

.verify-filmmaker-roles-excerpt {
  border-radius: 4px;
  @include article-style(
          $article-background-url: none,
          $article-background-color: transparent,
          $article-content-background-size: cover,
          $article-padding-sizes: 0px,
          $article-content-padding-sizes: 32px,
          $article-header-color: $mint,
          $article-content-background-color: $charcoal,
          $article-content-background-image: url('/images/bg-black-host.png'),
          $article-text-color: $white,
          $article-header-align: left,
          $article-text-align: left,
          $article-input-border-color: $mint
  );
}

.article-wrapper {
  margin-top: 20px;
  margin-bottom: 20px;
}