body{
  background-color: black;
}

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.general {
  width: 100%;
  height: 100%;
}

.val1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

.val2 {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}

.val3 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 2;
}

.val4 {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
}

.val5 {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
}

.val6 {
  grid-column: 4 / span 1;
  grid-row: 2 / span 2;
}

.val7 {
  grid-column: 1 / span 2;
  grid-row: 3 / span 2;
}

.val8 {
  grid-column: 3 / span 1;
  grid-row: 3 / span 1;
}

.val9 {
  grid-column: 3 / span 2;
  grid-row: 4 / span 1;
}

@media (min-width: 320px) {
  .parent {
    margin: 20px;
  }
}

@media (min-width: 480px) {
  .parent {
    margin: 20px 50px;
  }
}

@media (min-width: 600px) {
  .parent {
    margin: 50px 150px;
  }
}

@media (min-width: 801px) {
  .parent {
    margin: 50px 200px;
  }
}

@media (min-width: 1025px) {
  .parent {
    margin: 50px 300px;
  }
}