body {
  background: #e9e9e9;
}

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1100px;
  height: 100%;
  max-height: 800px;
}

.wrapper__block-one {
  min-width: 200px;
}

.wrapper__block-two {
  border: 1px dashed #000000;
  width: 100%;
}

.wrapper__red,
.wrapper__green,
.wrapper__blue {
  width: 200px;
  height: 200px;
  border-radius: 15px;
}

.wrapper__red {
  background: linear-gradient(120deg, #fa2f2f80, #ff620080);
  transform: translate(587px, 600px);
}

.wrapper__green {
  background: linear-gradient(120deg, #07fa1b, #019e0e);
  transform: translate(400px, -123px) rotate(110deg);

}

.wrapper__blue {
  background: linear-gradient(120deg, #312ffa80, #a200ff80);
  transform: translate(800px, -300px) scale(2);
}