Сергей Зенькович

@media (max-width: 1024px) {
    /*Ваши стили*/
}

<div class="mainB">
          <div class="main"></div>
          <div class="main"></div>
          <div class="main"></div>
          <div class="main"></div>
          <div class="main"></div>
          <div class="main"></div>
		  <div class="main"></div>
      </div>

.mainB{
	display: grid;
	grid-template-columns: repeat(8, 2fr);
	grid-template-rows: 2fr 2fr;
	grid-template-areas:
	"a a b b c c d d"
	". e e f f g g .";
	grid-gap: 10px;
	background-color: #999;
	width: 100%;
	height: 100vh;
}

.main{
	background-color: red;
}

.main:nth-of-type(1){
	grid-area: a;
}

.main:nth-of-type(2){
	grid-area: b;
}

.main:nth-of-type(3){
	grid-area: c;
}

.main:nth-of-type(4){
	grid-area: d;
}

.main:nth-of-type(5){
	grid-area: e;
}

.main:nth-of-type(6){
	grid-area: f;
}

.main:nth-of-type(7){
	grid-area: g;
}

<div class="main">
          <div class="main-gourmet"></div>
          <div class="main-carhartt"></div>
          <div class="main-adidas"></div>
          <div class="main-deep"></div>
          <div class="main-palace"></div>
          <div class="main-nike"></div>
      </div>

.main {
	height: 100vh;
  display: grid;
  grid-template-areas: 
      "gourmet gourmet carhartt" 
      "gourmet gourmet adidas"
      "deep palace nike";
  grid-template-columns: 3fr 3fr 3fr;
  grid-template-rows: 3fr 3fr 4fr;
  grid-gap: 15px;
  background-color: green;
}
.main-gourmet {
  grid-area: gourmet;
  opacity: 0.9;
  background-color: red;
}
.main-carhartt {
  grid-area: carhartt;
  opacity: 0.9;
    background-color: gray;
}
.main-adidas {
  grid-area: adidas;
  background-blend-mode: multiply, ;
  background-color: black;
}
.main-deep {
  grid-area: deep;
  opacity: 0.9;
    background-color: white;
}
.main-palace {
  grid-area: palace;
  opacity: 0.9;
    background-color: black;
}
.main-nike {
  grid-area: nike;
  opacity: 0.9;
  background-color: red;
}

<div class = 'a'>
	<h1>Hello</h1>
</div>