Responsive recipe page using flexbox and media queries, styled in SCSS

What challenges did you encounter, and how did you overcome them?

The biggest challenge of this project was styling the lists so they look exactly as in the design.

In order to get them right I took advantage of pseudo-elements (specifically ::before) which allowed me to create custom bullets and numbers without additional HTML markup.

For ordered list I also used the css function counter() to generate a number before each list item. I had to generate them manually because I wanted to use display: flex on li which makes the default numbering disappear.

(The following code is css compiled from the scss I wrote)

Style for the bullets of unordered lists:

.recipe ul li::before {
  content: "";
  background-color: #7a284e;
  height: 0.25rem;
  width: 0.25rem;
  border-radius: 50%;
  margin-right: calc(1rem - 0.25rem);
  flex-shrink: 0;
}

Style for the ordered list numbers (together with the counter() setup)

.recipe ol {
  counter-reset: listCounter;
}
.recipe ol li {
  counter-increment: listCounter;
}
.recipe ol li::before {
  content: counter(listCounter, decimal) ".";
  color: #5f564d;
  font-family: "Outfit";
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  color: #854632;
  align-self: flex-start;
  flex-shrink: 0;
}

What specific areas of your project would you like help with?

On this challenge I tried SASS (scss syntax) for the first time. Did I use it as it's supposed to be used or did I just unnecessarily complicate the code in some places? Did I nest too much? Was using mixins for the media queries and then including them in rules which are affected by screen size a good idea or is it better to just specify the media queries at the end?

Also, did I choose the right elements for the HTML structure or would you do something differently?

Thank you very much for feedback.