.background
  .container
    -for i in 1..9
      .row
        -for i in 1..2
          .wrapper
            -for i in 1..9
              .arrowWrapper
                <div class="arrow"></div>
                <div class="arrow one"></div>
                <div class="arrow two"></div>
                <div class="arrow three"></div>
                <div class="arrow four"></div>

body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  overflow: hidden;
  
  .background {
    display: flex;
    height: 400px;
    width: 500px;
    border: 20px solid white;
    background-color: white;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
    
    .container {
      margin-top: -40px;
      
      .row {
        display: flex;
        flex-direction: column;
        margin-top: -30px;
        

        .wrapper {
          display: flex;
        
        &:first-child {
          transform: translate(0, 0);
        }

          &:nth-child(2) {
            transform: translate(-35px, -15px);
          }

          .arrowWrapper {
            position: relative;
            width: 50px;
            height: 50px;
            transform-origin: top;
            margin-left: 20px;
            transform: rotate(45deg) translate(0, 25px);
            overflow: hidden;
            box-shadow: 0 0 5px rgba(34,34,34, .75);
            transition: all .3s ease-in-out;

            .arrow {
              position: absolute;
              width: 50px;
              height: 50px;
              transition: .5s ease-in-out;
              background-color: #CAD2C5;

              &.one {
                top: 10px;
                left: 10px;
                background-color: #84A98C;
              }

              &.two {
                top: 20px;
                left: 20px;
                background-color: #52796F;
              }

              &.three {
                top: 30px;
                left: 30px;
                background-color: #354F52;
              }

              &.four {
                top: 40px;
                left: 40px;
                background-color: #2F3E46;
              }
            }
          }
        }
      }
    }
  }
}