.hexagon {
  position: relative;
  width: 14px; 
  height: 8.08px;
  background-color: theme('colors.white');
  margin: 4.04px 0;
  border-left: solid 1.44px theme('colors.dg-primary.900');
  border-right: solid 1.44px theme('colors.dg-primary.900');
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 9.90px;
  height: 9.90px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 0.6103px;
}

.hexagon:before {
  top: -4.9497px;
  border-top: solid 2.0365px theme('colors.dg-primary.900');
  border-right: solid 2.0365px theme('colors.dg-primary.900');
}

.hexagon:after {
  bottom: -4.9497px;
  border-bottom: solid 2.0365px theme('colors.dg-primary.900');
  border-left: solid 2.0365px theme('colors.dg-primary.900');
}
