// main: style.less

.article-header {
  text-align: center;
  margin: 120px auto;
  color: @body_color;
  color: var(--body_color);

  @media screen and (max-width: @phone) {
    margin: 70px auto;
  }

  .article-categories {
    margin-bottom: 10px;

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

      &:hover {
        opacity: .6;
        transition: .1s;
      }
    }
  }

  .article-title {
    font-size: 48px;
    line-height: 160%;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 20px;

    @media screen and (max-width: @phone) {
      font-size: 42px;
      line-height: 140%;
    }
  }

  .article-meta {
    opacity: 1;
    color: @body_color;
    color: var(--body_color);

    .author-picture {
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}

.single-article {
  .article-featured-image {
    text-align: center;
    margin-bottom: 60px;

    img {
      max-width: 100%;
    }
  }
}

.page-header {
  text-align: center;
  margin: 120px auto;
  color: @body_color;
  color: var(--body_color);

  @media screen and (max-width: @phone) {
    margin: 70px auto;
  }

  .label {
    text-transform: uppercase;
    font-size: 14px;
    opacity: .3;
    color: @body_color;
    color: var(--body_color);
  }

  .meow-breadcrumb .breadcrumb-items-container {

    .breadcrumb-item {
      text-transform: uppercase;
      font-size: 14px;
      opacity: .3;
      color: @body_color;
      color: var(--body_color);
      transition: .1s;

      &:hover {
        opacity: .6;
        transition: .1s;
      }

      &.active {
        opacity: 1;
      }
    }

    .divider {
      opacity: .3;
      margin: 0 5px;
    }
  }

  .page-title {
    font-size: 48px;
    line-height: 160%;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 20px;

    @media screen and (max-width: @phone) {
      font-size: 42px;
      line-height: 140%;
    }
  }
}

.page-featured-image {
  text-align: center;
  margin-bottom: 60px;

  img {
    max-width: 100%;
  }
}