Нужна критика кода

*{ 
 transition: all 1s ease; 
} 
.container { 
  max-width: 1200px; 
  padding: 0 12px; 
  margin: 0 auto; 
  display: flex; 
} 
 
.carts { 
  padding-top: 60px; 
} 
 
.carts-wrapper { 
  display: flex; 
  justify-content: space-between; 
  margin: 0 auto; 
} 
 
.big-con { 
  margin-right: 20px; 
  width: 540px; 
  height: 540px; 
  background: url(https://image.ibb.co/eiVqnp/big.png) no-repeat center/contain; 
  position: relative; 
} 
 
.big-con::after { 
  content: ""; 
  position: absolute; 
  background: url(https://image.ibb.co/nPLqnp/boot_part.png) no-repeat center/contain; 
  width: 9%; 
  height: 9%; 
  left: -4.5%; 
  top: 42.7%; 
} 
 
.big-con::before { 
  content: ""; 
  position: absolute; 
  background: url(https://svgshare.com/i/87A.svg) no-repeat center/contain; 
  width: 25%; 
  height: 25%; 
  left: 1%; 
  top: 1%; 
} 
 
.middle-con { 
  height: 255px; 
  position: relative; 
  width: 540px; 
  background: url(https://image.ibb.co/iv2QL9/rec.png) no-repeat center/contain; 
} 
 
.middle-con::after { 
  content: ""; 
  position: absolute; 
  background: url(https://image.ibb.co/imns09/boot2.png) no-repeat center/contain; 
  width: 120%; 
  height: 120%; 
  left: -44%; 
  top: -14.7%; 
} 
 
.right-wrapper { 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
} 
 
.last-left { 
  width: 255px; 
  height: 255px; 
  background: url(https://image.ibb.co/dpZi7p/small1.png) no-repeat center/contain; 
} 
 
.last-right { 
  width: 255px; 
  height: 255px; 
  background: url(https://image.ibb.co/jb1kL9/small2.png) no-repeat center/contain; 
} 
 
.last-wrapper { 
  display: flex; 
  justify-content: space-between; 
} 
 
@media(max-width: 1270px) { 
  .big-con { 
    width: 486px; 
    height: 486px; 
  } 
  .middle-con { 
    width: 486px; 
    height: 229.5px; 
  } 
  .last-left { 
    height: 229.5px; 
    width: 229.5px; 
  } 
  .last-right { 
    height: 229.5px; 
    width: 229.5px; 
  } 
} 
 
@media(max-width: 1020px) { 
  .big-con { 
    width: 378px; 
    height: 378px; 
  } 
  .middle-con { 
    width: 378px; 
    height: 178.5px; 
  } 
  .last-left { 
    height: 178.5px; 
    width: 178.5px; 
  } 
  .last-right { 
    height: 178.5px; 
    width: 178.5px; 
  } 
} 
 
@media(max-width: 820px) { 
  .carts-wrapper { 
    flex-direction: column; 
  } 
  .big-con { 
    margin-right: 0; 
  } 
  .middle-con { 
    margin: 20px 0; 
  } 
} 
 
@media(max-width: 570px) { 
  .big-con { 
    width: 270px; 
    height: 270px; 
  } 
  .middle-con { 
    width: 270px; 
    height: 127.5px; 
  } 
  .last-left { 
    height: 127.5px; 
    width: 127.5px; 
  } 
  .last-right { 
    height: 127.5px; 
    width: 127.5px; 
  } 
}

<section class="carts"> 
  <div class="container"> 
    <div class="carts-wrapper"> 
 
      <div class="big-con"></div> 
 
      <div class="right-wrapper"> 
        <div class="middle-con"></div> 
        <div class="last-wrapper"> 
          <div class="last-left"></div> 
          <div class="last-right"></div> 
        </div> 
      </div> 
    </div> 
  </div> 
</section>