All solutions

<h1>?</h1>

I already know while submitting this that there will be a report saying the h1 is missing.

But in this design, I could not identify any text that could be assigned the role of an h1.

So what to do? I can't leave it like this because the reported issue will be bugging me too much!

Unexpected extra space below images

I have noticed this in another project as well, there seems to sometimes be a few pixels extra space below images (more than you specify using margins and padding). For example, the qr image here is originally 576 x 576. But when it gets constrained here to a container with a width of 288px, it's height in the browser is 292px. I just took 4px off the bottom margin to take this into account, is there a more generally applicable way to deal with this?

How to properly center this font?

The Overpass font is weirdly aligned to the top of its box, I handled this by adding more padding to the top than bottom, is there a better way?

Span without text-decoration inside a paragraph that has text-deco?

For the part that shows the large, green updated price and the crossed-out old price next to it, I wanted to style the whole paragraph with text-decoration: line-through; and then just have a span inside this paragraph that has all the large text and color styling, and text-decoration: none;

However, it seems this is not possible, since text-decoration: none; did not get rid of the line through the updated price. Eventually I just styled the whole paragraph green and with large text and had the small, crossed out part in a span with text-decoration: line-through;

It is actually easy to do it like this but I was still wondering if anyone has encountered a similar problem with a span inside a styled paragraph where you could not 'undo' the paragraph styling inside the span? Or do you have a neat solution for this type of issue?

In this design there are four identically styled elements, but each one has it's own colour (the red, orange, green and blue displays). These elements use the same colour for their title, background and subtle borders, but the opacity differs (for example the background is very faint, title is very bright).

I tried to avoid repeating the allocation of the same colour, but with different opacity values, to each detail of an individual element. To achieve this I gave each differently coloured element a class that contained only the h, s, and l value of their respective colour as custom properties. The general styling of this element type then uses these custom properties to construct the hsla colour for the title, background and border.

Overall, this seems to work fine, but it feels a little 'hacky', so my question is do you have any suggestions on how to do this differently, particularly in a way that might be clearer to read for someone who looks at the code for the first time?