How to properly move flex items?

Question

css

There is a design with cards. We need to correctly distribute them over the max-width 1170px container, two per line.
if I write flex 0 0 50% then everything is ok, but then it is not possible to make indents between them - the cards remain one per line. if you set a fixed size for the card and write justify-content: space-between\around, then the gaps are too large. Tell me, please, how to do it right? It seems like an elementary matter, but my head is already boiling

Thank you for paying attention

Answer 1

For parent

display: flex; flex-wrap: wrap; justify-content: space-between;

For items As a result, you will have one item 575px, respectively, the indent between them will be 20px Or specify the width as a percentage (for example 49.5%)
width: calc(50% - 10px);