CSS #media keeps original css - php

Question

I am working on a responsive website,
Here i have 4 divs inside a main div.
On desktop fullscreen you will see the 4 divs next to eachother
But once the screen goes below 1025px it should
Be 2 divs next to eachother and 2 divs below that ( 2x2 )
but once it goes below 1025px it keeps the main styling aswell and the blocks are still 4 wide
.grid-wide-4-block-main {
margin-left: auto;
margin-right: auto;
}
.grid-wide-4-block {
display: flex;
justify-content: space-around;
height: 1000px;
max-width: auto;
width: auto;
margin: auto;
max-width: 1620px;
}
.grid-wide-logo {
height: 50px;
width: 50px;
margin-left: 10px;
margin-top: 10px;
}
.grid-wide-4-blocks {
min-width: 20%;
margin-left: 3%;
margin-right: 3%;
height: 400px;
background-color: white;
box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 10%), 0 0.67rem 2rem rgb(0 0 0 / 10%);
}
.grid-wide-4-block-inside {
margin: 5px;
}
.grid-wide-4-title {
color: orange;
}
#media screen and (max-width: 1025px) {
.grid-wide-4-block {
max-width: 1025px;
height: 1000px;
}
.grid-wide-4-blocks {
min-width: 45%;
height: 40%;
background-color: white;
box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 10%), 0 0.67rem 2rem rgba(171, 77, 40, 0.1);
}
}
<div class="grid-wide-4-block-main">
<div class="grid-wide-4-block">
<?php echo $background; ?>
<div class="grid-wide-4-block-1 grid-wide-4-blocks">
<div class="grid-wide-4-block-inside">
<?php if ($grid_wide_4_imageObj) : ?>
<img class="grid-wide-4-image-1 grid-wide-logo" src="<?php echo $grid_wide_4_image_url; ?>" />
<?php endif; ?>
<h3 class="grid-wide-4-title">
<?php echo $grid_wide_4_title; ?>
</h3>
<p class="grid-wide-4-summary-1">
<?php echo $grid_wide_4_summary; ?>
</p>
</div>
</div>
<div class="grid-wide-4-block-2 grid-wide-4-blocks">
<div class="grid-wide-4-block-inside">
<?php if ($grid_wide_4_imageObj2) : ?>
<img class="grid-wide-4-image-2 grid-wide-logo" src="<?php echo $grid_wide_4_image_url2; ?>" />
<?php endif; ?>
<h3 class="grid-wide-4-title">
<?php echo $grid_wide_4_title2; ?>
</h3>
<p class="grid-wide-4-summary-2">
<?php echo $grid_wide_4_summary2; ?>
</p>
</div>
</div>
<div class="grid-wide-4-block-3 grid-wide-4-blocks">
<div class="grid-wide-4-block-inside">
<?php if ($grid_wide_4_imageObj3) : ?>
<img class="grid-wide-4-image-3 grid-wide-logo" src="<?php echo $grid_wide_4_image_url3; ?>" />
<?php endif; ?>
<h3 class="grid-wide-4-title">
<?php echo $grid_wide_4_title3; ?>
</h3>
<p class="grid-wide-4-summary-3">
<?php echo $grid_wide_4_summary3; ?>
</p>
</div>
</div>
<div class="grid-wide-4-block-4 grid-wide-4-blocks">
<div class="grid-wide-4-block-inside">
<?php if ($grid_wide_4_imageObj4) : ?>
<img class="grid-wide-4-image-4 grid-wide-logo" src="<?php echo $grid_wide_4_image_url4; ?>" />
<?php endif; ?>
<h3 class="grid-wide-4-title">
<?php echo $grid_wide_4_title4; ?>
</h3>
<p class="grid-wide-4-summary-4">
<?php echo $grid_wide_4_summary4; ?>
</p>
</div>
</div>
</div>
</div>

Answer 1

.grid-wide-4-block {
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-width: 1025px;
height: 1000px;
}
.grid-wide-4-blocks {
max-width: 45%;
height: 400px;
background-color: white;
box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 10%), 0 0.67rem 2rem rgba(171, 77, 40, 0.1);
}
this should work