Results Summary Component(Responsive Design)

some suggestions for responsiveness:

change your big-container media query (I recommend a smaller media query, try 600px instead of 930px)

display: flex;
flex-direction: column;
width: 100%
/* flex-wrap: wrap*/

also adding this to body to remove default margins (will also improve your mobile view)

    margin: 0;
    padding: 0;
    box-sizing: border-box;

• CSS Grids helps you create the outer layout of the webpage. You can build complex as well responsive design with this. This is why it is called ‘layout first’.

  -Flexbox mostly helps align content & move blocks.

  -CSS grids are for 2D layouts. It works with both rows and columns.

  -Flexbox works better in one dimension only (either rows OR columns).

  In conclusion . It will be more time-saving and helpful if you use both at the same time.