.square {
  width: 100px;
  height: 100px;
  border: 4px solid black;
  border-radius: 15px;
}

.sq1 {
  background-color: #f2b27d;
}

.sq2,
.sq2-transform {
  background-color: rgb(201, 124, 124, 0.7);
}

/* ===== Варіант 1: через position ===== */
.wrapper-position {
  position: relative;
  width: 200px;
  height: 150px;
  margin-bottom: 40px;
}

.wrapper-position .sq1 {
  position: absolute;
  top: 0;
  left: 0;
}

.wrapper-position .sq2 {
  position: absolute;
  top: 40px;
  left: 40px;
}

/* ===== Варіант 2: через transform ===== */
.wrapper-transform {
  position: relative;
  width: 200px;
  height: 150px;
}

.wrapper-transform .sq1 {
  position: relative;
  top: 0;
  left: 0;
}

.wrapper-transform .sq2-transform {
  position: relative;
  transform: translate(40px, -60px);
}