Sadly I'd say you need to go back and re-learn HTML from scratch, but that's typical of what happens when these derpy incompetent frameworks pollute your mind. More so when most people still have their cranium wedged up 1997's rectum and refuse to embrace proper markup practices.
The biggest faux-pas in your code is the use of classes to say what you want things to look like, instead of why they ARE or WHY they might receive style.
Just as the use of classes like "text-center box-shadow col-4-s col-6-m" are mind-numbingly dumbass and reek of someone sorely missing HTML 3.2 and all the deprecated presentational tags and attributes, things like "circle images" or "circle" are equally flawed. Particularly when you've got a perfectly good container with a class or ID on it. If everything inside a container of the same type of tag is getting the same class, DO NOT slop classes onto them.
No matter what some of the know-nothings out there will LIE TO YOU in regards to things like "render time". You know what takes longer to render? Two to twenty times the markup needed to do the job, that's what.
You also use multiple H1 without SECTION. Utter nonsense. An H1 (singular) is suppoed to be THE (singular) heading (singular) that everything on every page of your site is a subsection of. If you use SECTION you "can" restart at H1 depth, but UA support is spotty so stick to the 4 Strict structure. That's where H2 are supposed to mark the start of major subsections of the page, with the first H2 indicating the start of the main content unless MAIN is present. (and again, actual useful support for MAIN is spotty at best). H3 mean the start of a subsection of the H2 before it, H4 are the start of subsections of the H3 before it... care to guess what H5 and H6 MEAN? Likewise even HR means a change in topic or subject where heading text is unwanted or unwarranted. THEY DO NOT MEAN FONTS IN DIFFERENT WEIGHTS AND SIZES OR DRAWING A LINE ACROSS THE SCREEN!
That's just their default appearance, and if you choose ANY of your semantic tags based on their default appearance, you're choosing all the wrong tags for all the wrong reasons, and have failed to divine the purpose of HTML.
The same attitude should be taken with your classes. Say what the section IS, not what you want it to look like. If you cannot come up for a reason for it to receive a style for the media target you're styling (screen, print, aural, etc) it likely shouldn't be getting style in the first place.
Also not helping on the accessibility front that you're screwing around with pixel metrics instead of EM... but since they gave you a picture to start with (an utterly back-assward approach to web development) I imagine you weren't left with a lot of options.
Hell, as an accessibility consultant someone tells me to start with a picture, I walk out the door. This idiocy of letting some wanker spank it on their graphics tablet and call it "design" is utter and total ignorant garbage, and has rarely if ever led to a website that was worth a flying purple fish.
But again, if you're used to screwing around with the train wreck laundry list of how NOT to work with HTML, CSS, or JavaScript that is React, none of these flubs, mistakes, or misunderstandings comes as a shock. I've said since I first saw ANY of these front-end frameworks that the people who CREATED them have no business writing a single blasted line of HTML, much less telling others how to do so.
I'd love to see the image and your final conversion, just to dial in what you need to learn. Because you're actually wrong, CSS is actually quite easy, you just have to get your head out of the 1990's style HTML 3.2 presentational markup mentality. If you can handle the mental midgetry and derpitude that is React, there’s no excuse not to have proper semantics and separation of presentation from content.