recipes.import.less

.page.recipes {
  .item-recipe:first-child {
    height: 400px;

    .attribution {
      .background-image(linear-gradient(top, rgba(255,255,255,.9), rgba(255,255,255,1) 50%, @color-empty 100%));
      .transform(translate3d(0,0,0));

      &:before {
        .font-s1;
        .type-bold;
        .title-caps;
        .position(absolute, 0, 50%);
        .transform(translate3d(50%, -50%, 0));
        background: @color-primary;
        color: @color-empty;
        content: 'Featured';
        line-height: 1;
        padding: .15rem .2rem .1rem;
      }

      .title-recipe {
        .font-m2;
        .type-bold;
        color: @color-full;
        line-height: 1;
        padding-bottom: .25rem;
        padding-top: .5rem;
      }

      .metadata-recipe { padding-bottom: .5rem; }

      .author-recipe,
      .bookmarks-recipe { color: @color-medium; }
    }

    img {
      .position(absolute, auto, auto, auto, 50%, auto, 100%);
      .transform(translate3d(-50%,0,0));
    }
  }
}