four box grid css html custom

HTML

<div class="grid-four unique-class">
  <div class="grid-four-box gxb1">
      <div class="grid-four-bg">
	      <div class="grid-four-title">Title</div>
      </div>
  </div>
  <div class="grid-four-box gxb2">
      <div class="grid-four-bg">
	      <div class="grid-four-title">Title</div>
      </div>
  </div>
  <div class="grid-four-box gxb3">
      <div class="grid-four-bg">
	      <div class="grid-four-title">Title</div>
      </div>
  </div>
  <div class="grid-four-box gxb4">
      <div class="grid-four-bg">
	      <div class="grid-four-title">Title</div>
      </div>
  </div>
</div>

CSS

/* general reset */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
* { 
	box-sizing: border-box; 
	transition: all 0.2s; 
}
.open-sans {
	font-family:"Open Sans", sans-serif;
}
/* general reset */

/* grid-four */
.grid-four {
	font-family:"Open Sans", sans-serif;
	display: grid;
	grid-template-columns: repeat(4,calc(96%/4));
	grid-template-rows: 100%;  
	grid-gap: calc(5%/4);
	color:#FFF;
}
.grid-four-box {
	font-family:"Open Sans", sans-serif;
  display:block;
	width:100%;
	min-height:200px;
	padding:20px;
	text-align:center;
	background:linear-gradient(purple,blue);
	border-radius:10px;
}
@media(max-width:1024px) {
	.grid-four {
      	display:block;
      	grid-template-columns: auto;
      	grid-template-columns: auto;
  	}  
    .grid-four-box {
      grid-column: auto;
      grid-row: auto;
      margin-bottom:10px;
    }  
}
/* grid-four */