Responsive Layout Using Flex-Box and Media Queries

For mobile phones

So the website desgined for mobile first I set the flex-basis for the images to 100% to have one colomn layout and also for responsive images I used the object-fit property and set it to cover and adjust thier position to just have the part needed to be shown using  object-position 

For tablet

I set a media querie at 550px as min-width and 800px as max-width 

For desktop

I set a media querie at 800px as min-width 

Remarkable Thing

For the text floating around the logo in tablet and desktop version nothing magic I just used shape-outside property and used chrome extention called "CSS shape Editor" to costimize the shape aroud the logo It's included in the Firefox Browser dev tools