Adaptive tiles without padding in CSS

Let's make a tile that will have a different number of blocks in a row depending on the width of the screen. Here's an example of what we should get:

Let's write the HTML code first:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

Let's now add styles to the parent blocks:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

Now let's set styles for the blocks themselves, without setting their width:

.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

Obviously, the width of the blocks should be in percentages, so that when the screen changes, the blocks smoothly change their width. At the same time, at certain points on the screen, we must change the width of the blocks so that a certain number of these blocks fit in a row.

Let's write some code that will put four blocks in a row:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Now let's put three blocks in a row:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

Now let's put two blocks in a row:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

One block in a row:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

Let's put all the code together:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Rework my code so that the width of the blocks is calculated using the calc function.

Make a tile that when the screen is reduced, first there will be four elements in a row, then two elements in a row, and then one element in a row.

Make a tile that when the screen is reduced, first there are six elements in a row, then three elements in a row, and then one element in a row.