* {
  margin: 0;
}

body {
  background-image: url("https://i.imgur.com/oga1LO6.png");
  opacity: .7;
  background-repeat: no-repeat;
}
 
.container {
  max-width: 1400px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.container > * {
/* flex-basis: 200px; */
height: 200px;
background-color: lightblue;
  font-size: 10rem;

  flex-shrink: 1;
  flex-grow: 1;
}

.box1 {
  flex-basis: 100%;
}
.box2 {
  flex-basis: 10%;
}

.box3 {
  flex-basis: 40%;
}

.box4 {
  flex-basis: 40%;
}

.box5 {
  flex-basis: 78.6%;
}

.box6 {
  flex-basis: 10%;
}