.paragraph--yield,
.paragraph--ingredient-substitute,
.paragraph--ingredients {
  display: flex;
  --ingredient-name-font-size: var(--typography--font-size--md);
  flex-wrap: nowrap;
}
.paragraph--yield h4, .paragraph--yield a, .paragraph--yield p,
.paragraph--ingredient-substitute h4,
.paragraph--ingredient-substitute a,
.paragraph--ingredient-substitute p,
.paragraph--ingredients h4,
.paragraph--ingredients a,
.paragraph--ingredients p {
  font-size: var(--ingredient-name-font-size);
}
.paragraph--yield h4 a, .paragraph--yield h4 span,
.paragraph--ingredient-substitute h4 a,
.paragraph--ingredient-substitute h4 span,
.paragraph--ingredients h4 a,
.paragraph--ingredients h4 span {
  font-weight: 600;
}
.paragraph--yield h4 a,
.paragraph--ingredient-substitute h4 a,
.paragraph--ingredients h4 a {
  color: var(--text--button);
  text-decoration: underline;
}
.paragraph--yield .dose,
.paragraph--ingredient-substitute .dose,
.paragraph--ingredients .dose {
  white-space: nowrap;
}
@media (max-width: 767px) {
  .paragraph--yield,
  .paragraph--ingredient-substitute,
  .paragraph--ingredients {
    --ingredient-name-font-size: var(--typography--font-size--sm);
  }
}

.paragraph--ingredient-substitute:has(.paragraph--ingredient-substitute--text) {
  flex-direction: column;
  gap: var(--spacing--05);
}
.paragraph--ingredient-substitute:has(.paragraph--ingredient-substitute--text) > div:last-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ingredients-table {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--1);
  width: 100%;
  overflow: hidden;
}
.ingredients-table .paragraph--yield,
.ingredients-table .paragraph--ingredients {
  --ingredient-name-font-size: var(--typography--font-size--sm);
  background-color: var(--background--background);
  border-radius: var(--radius--2);
  padding: var(--spacing--1) var(--spacing--2);
  gap: var(--spacing--1);
}
.ingredients-table .paragraph--yield > div:first-child,
.ingredients-table .paragraph--ingredients > div:first-child {
  flex: 1;
}
.ingredients-table .paragraph--yield > div + div:last-child,
.ingredients-table .paragraph--ingredients > div + div:last-child {
  text-align: right;
}
.ingredients-table .paragraph--yield {
  color: var(--text--inverse);
  background-color: var(--background--background-dark);
}
.ingredients-table .paragraph--ingredient-substitute-intro,
.ingredients-table .paragraph--ingredient-substitute {
  background-color: transparent;
  border: 1px solid var(--stroke--invert);
  border-radius: var(--radius--2);
  padding: var(--spacing--1) var(--spacing--2);
}
/*# sourceMappingURL=paragraph--ingredients.css.map */