All solutions

I had no idea how to add the purple overlay over the image. I also had trouble aligning the stats in a column for the mobile view. For the html I had used a table with two table rows. The first held 3 td's for the stats. the second table row held 3 td's for the stat headings. This layout worked perfect for the web view but I couldn't figure how to transform it for the mobile view in a column layout without completely changing the html and redesigning my css. Does anyone know any alternatives?

I struggled with centering the main-cta section (check my html for context) after giving it a width of 85%. This element is wrapped inside a flex container that is meant to horizontally center it (with justify content). Before I had changed it's width however, it centered perfectly. I had to resort top margin{ 0 auto}; to center it the way you see it. Does this mean this mean that flexbox doesn't work when the element you're trying to center has a custom width? Any help is appreciated

What is the best method of adding that background shadow effect that is behind the main NFT card? I struggled to replicate that so I just used the CSS box shadow property I also struggled with implementing the hover state for the actual NFT image(the cube). The brief design had a cyan overlay with an icon showing for the hover state. I just resorted to using the box shadow again. If anyone knows how to do that, your advice would be appreciated.