$size: 140px;

$c1: #e6b2b4;
$c2: #eecdcc;
$c3: #ec8d8c;
$c4: #e97979;
$c5: #f15858;
$c6: #e35454;
$c7: #d34a50;
$c8: #c23e48;
$c9: #ae3847;

$stretch: 3.5;

@mixin colors ($c1, $c2) {
  &:before {
    border: {
      color: transparent $c1;
    }
  }
  &:after {
    border: {
      color: transparent $c2; 
    }
  }
}

.logo {
  width: $size * 3;
  height: $size * 3;
  position: relative;
  margin: auto;
}

.part {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  margin-top: $size/$stretch; 
  line-height: 0;
  font-size: 0;

  
  @for $i from 0 through 1 {
    
    &.part-#{$i} {
      left: $size*$i + $size/2;
    }
  }
  @for $i from 2 through 4 {
    
    &.part-#{$i} {
      top: $size/$stretch;
      left: $size*($i - 2);
    }
  }
  @for $i from 5 through 8 {
    
    &.part-#{$i} {
      top: $size/$stretch*2;
      left: $size*($i - 6) + $size/2;
    }
  }
  @for $i from 9 through 11 {
    
    &.part-#{$i} {
      top: $size/$stretch*3;
      left: $size*($i - 9);
    }
  }
  @for $i from 12 through 15 {
    
    &.part-#{$i} {
      top: $size/$stretch*4;
      left: $size*($i - 13) + $size/2;
    }
  }
  @for $i from 16 through 18 {
    
    &.part-#{$i} {
      top: $size/$stretch*5;
      left: $size*($i - 16);
    }
  }
  @for $i from 19 through 20 {
    
    &.part-#{$i} {
      top: $size/$stretch*6;
      left: $size*($i - 19) + $size/2; 
    }
  }
  @for $i from 21 through 21 {
    &.part-#{$i} {
      top: $size/$stretch*7;
      left: $size*($i - 20); 
    }
  }
  
  &:before {
    content: '';
    border: {
      style: solid;
      width: $size/$stretch $size/2 $size/$stretch 0;
      color: transparent $c2; 
    }
  }
  &:after {
    content: '';
     border: {
      style: solid;
      width: $size/$stretch 0 $size/$stretch $size/2;      
      color: transparent $c2; 

       
    }
  }
  
  
  &.part-5,
  &.part-2,
  &.part-0 {
    @include colors($c2, $c1);
  }
  &.part-8,
  &.part-4,
  &.part-1 {
    @include colors($c1, $c2);

  }
  &.part-3 {
    @include colors($c3, $c3);
  }
  &.part-12,
  &.part-9,
  &.part-6 {
    @include colors($c3, $c4);
  }
  &.part-15,
  &.part-11,
  &.part-7 {
    @include colors($c4, $c3);
  }
  &.part-10 {
    @include colors($c5, $c5);
  }
  &.part-16,
  &.part-13 {
    @include colors($c5, $c6);
  }
  &.part-18,
  &.part-14 {
    @include colors($c6, $c5);
  }
  &.part-17 {
    @include colors($c7, $c7);
  }
  &.part-20,
  &.part-19 {
    @include colors($c8, $c8);
  }
  &.part-21 {
    @include colors($c9, $c9);
  }
  
  &.part-12,
  &.part-5{
    &:before {
      opacity: 0; 
    }
  }
  &.part-15,
  &.part-8 {
    &:after {
      opacity: 0; 
    }
  }
}