Recipe page using responsive design

What are you most proud of, and what would you do differently next time?

I enjoyed working out all the different stylings for the lists, tables and the image, since they provided unique challenges. But next time I will try to utilize simpler solutions, since i felt like I overdid it a little, even though I learnt a lot of new css tricks from this. I will also try to come up with a better class strategy, trying to avoid overusing css selectors like I did here

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

Styling the image was challenging, making sure it stays responsive between the different screen sizes. Using aspect-ratio and an image wrapper made this easier though. Centering the text on the lists and getting the spacing on the table right was difficult, but using pseudo-elemnts above ::marker helped to solve these issues. The solution with counter is probably overkill though and ::marker probably would have been enough here.

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

Any Ideas on how to apporach spacings in lists around the bullet points and text alignment without using anything more complex than ::marker.

.card :is(ul, ol) li {
  display: flex;
  gap: var(--space-4);
}

.card ul li {
  align-items: center;
}

.card ul li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--brown-800);
  flex-shrink: 0;
}

Also, I can't figure out where the size difference is coming from between my preparation section nad the solution