skilled-elearning-landing-page using css flex, clamp

The main chalenge of the project was to position the hero image properly. Because the image is trimmed differently for different screen sizes, but somehow I managed to do it)

Making hover effects for buttons was pretty time consuming, because transition didn't work for linear-gradient, so I used a trick with pseudo-element

Also I used CSS min function to make elements more responsive based on the viewport width and clamp to make responsive typography. But, these functions are not supported yet in some browsers. What are the best practises of doing this kind of things like squishy paddings, margins, fluid typography so it would be as much responsive and cross-browser as possible? What should I add to my code?