*,
*:after {
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(181, 49%, 56%);
  height: 100vh;
  overflow: hidden;
  position: relative;
}

// Each group contains two peaks (in retrospect, I should have
// called this ‘%twin-peaks’)
%peak-group {
  position: absolute;
  width: 100%;
}

// We use these a bunch, so it’s best to stash them in vars
$peak-height: 24vh;
$peak-width: 78vw;

// Generate each peak using the good old-fashioned CSS triangle trick
%peak {
  border-color: transparent;
  border-style: solid;
  
  // The left and right borders add up to our desired width, so we divide
  // the desired width by two to get the correct ‘border-width’
  border-width: $peak-height ($peak-width / 2);
  height: 0;
  position: absolute;
  bottom: 100%;
  width: 0;
  
  // Use a pseudoelement to provide the ‘base’ of our peaks to avoid
  // the ‘floating mountain’ effect
  &:after {
    content: '';

    // Kind of arbitrary, really; this could have been any value that
    // prevented daylight between the peaks
    height: $peak-height;
    position: absolute;

    // Subtracting 1px fixes an occasional subpixel-rounding gremlin
    top: calc(#{$peak-height} - 1px);
    
    // Since the width of the parent element is zero, we need to bump this out
    // to the left by half the width of the peak so it lines up properly
    left: ($peak-width / 2) * -1;
    width: $peak-width;
  }
}

// Stash our colours in a list...
$peak-colors: (
  hsl(28, 100%, 24%),
  hsl(27, 91%, 31%),
  hsl(26, 81%, 39%),
  hsl(25, 77%, 47%),
  hsl(25, 91%, 54%)
);

// ...and loop over it to draw our peak groups
@each $color in $peak-colors {

  // It’s handy to stash this in a var
  $index: index($peak-colors, $color);

  // Using the index in the class name gives us ‘.peak-group-1’,
  // ‘.peak-group-2’, etc.
  .peak-group-#{$index} {
    @extend %peak-group;
    
    // The peak group overlap is 17vh. Sass lists are one-indexed; so to get
    // our first peaks to sit at the bottom of the stack, we subtract one
    // from the index to multiply the transform by zero.
    bottom: 17vh * ($index - 1);
    
    // We’re stacking as we go, so each additional leaf goes underneath
    // the previous one
    z-index: $index * -1;
    .left-peak,
    .right-peak {
      border-bottom-color: $color;
      &:after {
        background-color: $color;
      }
    }
  }
}

.left-peak,
.right-peak {
  @extend %peak;
}

// I could get fancy and use a list for this like I did for ‘Foliage’, but
// that level of complexity isn’t really necessary here

.left-peak {
  left: -13vw;
}

.right-peak {
  right: -13vw;
}