@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-recipe__servings {
  @include font-gm-sans-bold;
  font-size: rem(15);
  letter-spacing: rem(1.3);
  color: $color-grey-900;
}
.c-ingredients {
  padding: rem(30) 0;
  border-top: 1px solid $color-stone-200;
}
.c-ingredients__heading {
  @include font-gm-sans-bold;
  margin-top: 0;
  color: $color-grey-660;
  font-size: rem(15);
  letter-spacing: rem(1.3);
  text-transform: uppercase;
}
// Because these elements contain strings of HTML that were authored in a
// WYSIWYG editor, we can't add classes to individual sub-elements, so we're
// forced to target them via child selectors
.c-recipe__body,
.c-ingredients__method,
.c-ingredients__ingredients {
  @include font-pratt;
  color: $color-grey-900;
  font-size: rem(18);
  line-height: line-height(18, 27); // font-size and line-height, in pixels
}
.c-ingredients__ingredients {
  p, li {
    margin-top: 0;
    margin-bottom: 0;
  }
}

// more than one ingredient
.c-ingredients__ingredients + .c-ingredients__heading {
  margin-top: rem(30);
}
