.sq-pos
  .sq-wrapper.sq-1-wrapper
    .sq.sq-1
  .sq-wrapper.sq-2-wrapper
    .sq.sq-2
  .sq-wrapper.sq-3-wrapper
    .sq.sq-3

$bg: #e8e5e0

$color: ((#314b5c, #296a7e, #298c92, #6ab5bb), (#406f89, #2ea4c2, #4dc5d5, #81d2e5), (#5b889f, #4dbfda, #73cee1, #9ad9ea))

$color2: ((red, pink, violet, blue), (#406f89, #2ea4c2, #4dc5d5, #81d2e5), (#5b889f, #4dbfda, #73cee1, #9ad9ea))


@mixin linear-gradient($direction, $gradients...) 
  background-image: linear-gradient($direction, $gradients...)


@function colorL($some-color, $num)
  @return nth($some-color, $num)
 
@for $i from 1 through length($color)
  .sq-#{$i}
    @include linear-gradient(colorL(nth($color, $i), 4) 25%, colorL(nth($color, $i), 3) 25%, colorL(nth($color, $i), 3) 50%, colorL(nth($color, $i), 2) 50%, colorL(nth($color, $i), 2) 75%, colorL(nth($color, $i), 1) 75%)
    animation: color 10s
    
 
$height: 150px
$width: $height * 3.47

body
  background: $bg

@keyframes rotate
  from
    transform: rotate(0deg)
    
  to
    transform: rotate(359deg)

 
.sq-pos
  position: relative
  width: $width
  height: (1.7320 * $width)/2
  // animation: rotate 10s
  transform-origin: $width/2 $height
  

.sq-wrapper
  width: $width
  height: $height
  font-size: 0
  display: inline-block
  clip-path: polygon(50% 0%, 0 100%, 100% 100%)
  position: absolute
  left: 0
  top: $height
  transform-origin: 50% 0
 
.sq-1-wrapper
  transform: rotate(60deg)

.sq-2-wrapper
  transform: rotate(180deg)
 
.sq-3-wrapper
  transform: rotate(-60deg)
  
.sq
  width: 100%
  height: 100%