.paragraph--steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--3);
}
.paragraph--steps h2 {
  text-align: center;
}
.paragraph--steps .content {
  background-color: var(--background--background-light);
  padding: var(--spacing--4) clamp(var(--spacing--3), 3vw, var(--spacing--4)) var(--spacing--5);
  border-radius: var(--radius--3);
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .paragraph--steps .content:has(.ingredients-container) {
    flex-direction: initial;
    gap: clamp(var(--spacing--5), 5vw, var(--spacing--6));
  }
}
.paragraph--steps .content > div {
  display: flex;
  flex-direction: column;
}
.paragraph--steps .content > div h3 {
  color: var(--text--active);
  font-size: var(--typography--font-size--xl);
  font-weight: 600;
  margin-bottom: var(--spacing--3);
}
.paragraph--steps .content > div:first-child.ingredients-container {
  gap: var(--spacing--3);
}
.paragraph--steps .content > div:first-child.ingredients-container h3 {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .paragraph--steps .content .ingredients-container {
    min-width: 30.4rem;
    width: 30.4rem;
  }
}
@media (max-width: 767px) {
  .paragraph--steps .content {
    flex-direction: column;
    gap: var(--spacing--5);
  }
}
/*# sourceMappingURL=paragraph--steps.css.map */