.wrapper {
   padding: 30px;
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
}

.quads {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
}

.quads__quad {
   width: 200px;
   height: 200px;
   background: #757272;
   border-radius: 5px;
}

.quads__quad--red {
   background: linear-gradient(130deg, rgb(252, 67, 67), rgb(215, 106, 47));
}

.quads__quad--green {
   background: linear-gradient(130deg, rgb(25, 186, 38), rgb(47, 215, 167));
}

.quads__quad--blue {
   background: linear-gradient(130deg, rgb(33, 25, 186), rgb(160, 44, 193));
}

.area {
   flex: 1 0 auto;
   border: 5px dashed #333;
   height: 800px;
}

.area__place {
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: sans-serif;
   font-weight: 900;
   width: 200px;
   height: 200px;
   pointer-events: none;
   border-radius: 5px;
   border: 5px dashed #8f8787;
   color: #8f8787;
}

/* ================== Выполнение дз ниже =================== */

.quads__quad--red {
   transform: translate(322%, 298%);
}

.quads__quad--green {
   transform: translate(202%, -48%) rotate(25deg);
}

.quads__quad--blue {
   transform: translate(417%, -147%) scale(2) rotate(180deg);
}