Responsive product review card component page with HTML and CSS

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

This time I was working with hsl. When I try to get dark the add-to-cart button I had to change the parameters of hsl function like this:

:root {
	--dark-cyan: hsl(158, 36%, 37%);
}

.add-to-cart {
	background-color: var(--dark-cyan);
}

.add-to-cart:hover {
	background-color: hsl(158, 36%, 27%);
}

From now on I will be using this CSS function more often.

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

I had problems making the card image responsive, because I didn't use javascript in this project. So, trying and trying I code of this way:

.banner.mobile {
	display: inline-block;
	border-radius: 8px 8px 0 0;
}

.banner.desktop {
	display: none;
}

@media only screen and (min-width: 600px) {
	.banner.mobile {
		display: none;
	}

	.banner.desktop {
		display: inline-block;
		width: 50%;
		height: auto;
		border-radius: 8px 0 0 8px;
	}
}

There may be other better ways to code it, but at the moment this is my solution.

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

If you know a better way of do it, you can tell me. I will really appreciate it.