// main: style.less


@media screen and (max-width: @tablet) {
  .row {
    display: inline;
  }
}

.article-card-container {
  display: inline-block;
  padding: 30px 15px;
  box-sizing: border-box;
  font-size: 16px;

  .article-card {
    position: relative;
    width: 100%;
    background: @card_bg;
    background: var(--card_bg);
    box-shadow: @shadow;
    box-shadow: var(--shadow);
    color: var(--card_color);
    transition: .2s;

    &:hover {
      box-shadow: @deeper_shadow;
      box-shadow: var(--deeper_shadow);
      transition: .3s;
    }

    .article-featured-image {
      display: block;
      background-size: cover;
      background-position: center;
    }

    .article-meta {

      .article-categories {

        .article-category {
          display: inline-block;
          text-transform: uppercase;
          font-size: 14px;
          color: @card_color;
          color: var(--card_color);
          opacity: .3;
        }
      }

      .article-title {
        display: block;
        font-size: 28px;
        font-weight: 400;
        margin-top: 0;
        margin-bottom: 20px;
        color: @card_color;
        color: var(--card_color);
      }

      .article-excerpt {
        line-height: 160%;
        opacity: .6;
      }

      .read-more-btn {
        display: inline-block;
        color: @read_more_btn_color;
        color: var(--read_more_btn_color);
        background: @read_more_btn_bg;
        background: var(--read_more_btn_bg);
        padding: 15px 0;
        width: 140px;
        text-align: center;
        line-height: 22px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -70px;
        margin-bottom: -26px;
        box-shadow: @shadow;
        box-shadow: var(--shadow);
        border-radius: 25px;
        transition: .2s;
        
        &:hover {
          box-shadow: @deeper_shadow;
          box-shadow: var(--deeper_shadow);
          transition: .3s;
        }
      }
    }
  }

  &.large {
    width: 100%;

    .article-card {
      display: flex;
      width: 100%;

      .article-featured-image {
        display: flex;
        width: 60%;
        padding-bottom: 40%;
      }

      .article-meta {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        padding: 30px;
        box-sizing: border-box;
      }
    }

    @media screen and (max-width: @tablet) {
      width: 50%;

      .article-card {
        display: block;

        .article-featured-image {
          width: 100%;
          padding-bottom: 66.66%;
        }

        .article-meta {
          padding: 30px;
          padding-bottom: 90px;
          box-sizing: border-box;
        }
      }
    }

    @media screen and (max-width: @big_phone) {
      width: 100%;
    }
  }

  &.medium {
    width: 50%;
    vertical-align: top;

    .article-card {

      .article-featured-image {
        width: 100%;
        padding-bottom: 66.66%;
      }

      .article-meta {
        padding: 30px;
        padding-bottom: 90px;
        box-sizing: border-box;
      }
    }

    @media screen and (max-width: @big_phone) {
      width: 100%;
    }
  }

  &.small {
    width: 33.33%;
    vertical-align: top;

    .article-card {

      .article-featured-image {
        width: 100%;
        padding-bottom: 66.66%;
      }

      .article-meta {
        padding: 30px;
        padding-bottom: 90px;
        box-sizing: border-box;
      }
    }

    @media screen and (max-width: @tablet) {
      width: 50%;
    }

    @media screen and (max-width: @big_phone) {
      width: 100%;
    }
  }
}