- 14.times do |row|
  %div.wrapper
    - 18.times do |column|
      %div{:class => "hexagon h-#{row+1}-#{column+1}"}

$hexagon-width: 20px;
$hexagon-height: 11.5px;
body {
  background-color: #eaeae8;
  margin-top: 4rem;
}

.wrapper {
  display: flex;
  justify-content: center;
   margin-top: -5px;
  &:nth-child(even) {
    margin-left: 20.5px;
  }
}

.hexagon {
  display: inline-block;
  position: relative;
  width: $hexagon-width; 
  height: $hexagon-height;
  color: white;
  background-color: currentColor;
  margin: ($hexagon-height/2) 0.5px;
  
  &:before,
  &:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: ($hexagon-width/2) solid transparent;
    border-right: ($hexagon-width/2) solid transparent;
  }
  
  &:before {
    bottom: 100%;
    border-bottom: ($hexagon-height/2) solid currentColor;
  }
  
  &:after {
    top: 100%;
    width: 0;
    border-top: ($hexagon-height/2) solid currentColor;
  }
}

.h-1-5,
.h-1-6,
.h-1-7,
.h-1-8,
.h-1-9,
.h-1-10,
.h-1-11,
.h-1-12,
.h-1-13,
.h-1-14,
.h-1-15,

.h-2-4,
.h-2-15,

.h-3-4,
.h-3-16,

.h-4-3,
.h-4-16,

.h-5-4,
.h-5-16,

.h-6-3,
.h-6-16,

.h-7-3,
.h-7-4,
.h-7-5,
.h-7-6,
.h-7-7,
.h-7-8,
.h-7-9,
.h-7-10,
.h-7-11,
.h-7-12,
.h-7-13,
.h-7-14,
.h-7-15,
.h-7-16,
.h-7-17,

.h-8-3,
.h-8-16,

.h-9-4,
.h-9-5,
.h-9-6,
.h-9-7,
.h-9-8,
.h-9-9,
.h-9-10,
.h-9-11,
.h-9-12,
.h-9-13,
.h-9-14,
.h-9-15,
.h-9-16,

.h-10-3,
.h-10-16,

.h-11-4,
.h-11-5,
.h-11-8,
.h-11-12,
.h-11-15,
.h-11-16,

.h-12-3,
.h-12-5,
.h-12-6,
.h-12-7,
.h-12-9,
.h-12-10,
.h-12-11,
.h-12-13,
.h-12-14,
.h-12-16,

.h-13-4,
.h-13-16,

.h-14-4,
.h-14-5,
.h-14-6,
.h-14-7,
.h-14-8,
.h-14-9,
.h-14-10,
.h-14-11,
.h-14-12,
.h-14-13,
.h-14-14,
.h-14-15{
  color: black;
}

.h-2-5,
.h-2-6,
.h-2-7,
.h-2-8,
.h-2-9,
.h-2-10,
.h-2-11,
.h-2-12,
.h-2-13,
.h-2-14,

.h-3-5,
.h-3-6,
.h-3-7,
.h-3-8,
.h-3-9,
.h-3-10,
.h-3-11,
.h-3-12,
.h-3-13,
.h-3-14,
.h-3-15,

.h-4-4,
.h-4-5,
.h-4-6,
.h-4-7,
.h-4-8,
.h-4-9,
.h-4-10,
.h-4-11,
.h-4-12,
.h-4-13,
.h-4-14,
.h-4-15,

.h-5-5,
.h-5-6,
.h-5-7,
.h-5-8,
.h-5-9,
.h-5-10,
.h-5-11,
.h-5-12,
.h-5-13,
.h-5-14,
.h-5-15,

.h-6-4,
.h-6-5,
.h-6-6,
.h-6-7,
.h-6-8,
.h-6-9,
.h-6-10,
.h-6-11,
.h-6-12,
.h-6-13,
.h-6-14,
.h-6-15,

.h-12-4,
.h-12-8,
.h-12-12,
.h-12-15,

.h-13-5,
.h-13-6,
.h-13-7,
.h-13-8,
.h-13-9,
.h-13-10,
.h-13-11,
.h-13-12,
.h-13-13,
.h-13-14,
.h-13-15{ 
  color: #fe9611;
}

.h-10-4,
.h-10-5,
.h-10-6,
.h-10-7,
.h-10-8,
.h-10-9,
.h-10-10,
.h-10-11,
.h-10-12,
.h-10-13,
.h-10-14,
.h-10-15{
  color: #b1d23a
}

.h-11-6,
.h-11-7,
.h-11-9,
.h-11-10,
.h-11-11,
.h-11-13,
.h-11-14 {
  color: #ea3729;
}

.h-8-4,
.h-8-5,
.h-8-6,
.h-8-7,
.h-8-8,
.h-8-9,
.h-8-10,
.h-8-11,
.h-8-12,
.h-8-13,
.h-8-14,
.h-8-15 {
  color: #934402;
}