CSS Battle - #10 Cloaked Spirits

HTML

<div class="wrapper">
  <div class="column-1"></div>
  <div class="column-2"></div>
  <div class="column-3"></div>
  <div class="circle-1"></div>
  <div class="circle-2"></div>
  <div class="circle-3"></div>
</div>

CSS

  body {
    margin: 0;
    background: #62306D;
  }

  .wrapper {
    height: 100%;
    margin: 50px;

    position: relative;
  }

  .column-1 {
    position: absolute;
    left: 0;
    bottom:0;
    width: 33.3%;
    height: 50%;
    background: #F7EC7D;
  }

  .circle-1 {
    position: absolute;
    left: 0;
    bottom:33.5%;
    width: 100px;
    height: 100px;
    background: #AA445F;
    border-radius: 50%;    
  }

  .circle-1:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #E38F66;
    border-radius: 50%;
  }

  .circle-3 {
    position: absolute;
    right: 0;
    bottom:33.5%;
    width: 100px;
    height: 100px;
    background: #AA445F;
    border-radius: 50%;    
  }

  .circle-3:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #E38F66;
    border-radius: 50%;
  }

  .circle-2 {
    position: absolute;
    left: 33.3%;
    top: -0.15%;
    bottom:33.5%;
    width: 100px;
    height: 100px;
    background: #E38F66;
    border-radius: 50%;    
  }

  .circle-2:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #AA445F;
    border-radius: 50%;    
  }

  .column-2 {
    position: absolute;
    left: 33.3%;
    bottom:0;
    width: 33.4%;
    height: 82.5%;
    background: #F7EC7D;
  }

  .column-3 {
    position: absolute;
    right: 0;
    bottom:0;
    width: 33.3%;
    height: 50%;
    background: #F7EC7D;
  }