flex-box , pure CSS

thanks a lot I would be glad to use them

Not bad! It's really responsive and the image resizes well in the container. Visually it looks very good, although it does look like the "Queries" section slides under the image if you shrink the screen width down past 950px. Instead of setting the width of the 2 sides of the card to 50%, you might try using flex: 1 on each side?

In your code, I've never seen a reset.css file like that. Might be overkill for most things you work on? Here are my resets, which I use so much I've created a VSCode snippet for them:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-size: 100%;
}