As @TechnoBear kindly pointed out I already told you that further refinement would be down to you. I have given you the basics and its your job to make it perfect. All the elements are there and you just need to work out the exact amounts for everything to be as perfect as it can be.
It would have been easier if I hadn’t got rid of all those unnecessary divs because my html is clean so you may want to work through your html and apply the same processes to your divs if that makes it easier for you to understand.
As is stands it is very close to the original already as can be seen by the screenshot of them side by side.
… and on smaller screens:
The hover states need a bit of work as they are not matching the original but as I said I don’t have the inclination to refine further. You need to sit down and work out how 1px equates to a percentage of 400px which is the size you based everything on. Then for every pixel measurement you would use the exact fraction of the vh unit which would match the original units you used. For example if the element was set to 20vw width and height to start with (which will scale with the viewport) then 1px would equate to a 400th of that 20vw if it were to match the original (= .05vw). Of course once you get into fractions then you will get rounding errors so in cases where you only have a 1px overlap (such as in the triangles) then you may want to keep them to pixels but of course then they won’t scale. There is no perfect answer because a pixel is the smallest unit and fractions of pixels get rounded up or down.
The basics are as @Archibald said above and you need to convert all pixels to vw at appropriate values.
As I said above the best solution would be to draw as an svg and then scaling it is simple.