.wrapper {
    padding: 30px;
    max-width: 1198px;
    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, #fc4343, #d76a2f);
}
.quads__quad--green {
    background: linear-gradient(130deg, #19ba26, #2fd7a7);
}
.quads__quad--blue {
    background: linear-gradient(130deg, #2119ba, #a02cc1);
}

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

.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 #3e0028;
    color: #000000;
}

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

.quads__quad--red {
    transform: translate(644px, 594px);
}

.quads__quad--green {
    transform: translate(403px, -95px) rotate(115deg);
}

.quads__quad--blue {
    transform: translate(834px, -296px) rotate(180deg) scale(2);
}