// Geometry
$size: 65px;
$gap: 0.2*$size;
$circle-scale: 0.4;

// Color
$black: #000;
$grey: #555;
$white: #FFF;

body {
  overflow: hidden;
  background: $grey;
}

.container {
  width: 120%;
  margin: -$size;
}

.square {
  width: $size;
  height: $size;
  background: $black;
  float: left;
  margin: 0.5*$gap;
  position: relative;
}


.square:after {
  content: "";
  width: (1+$circle-scale)*$gap;
  height: (1+$circle-scale)*$gap;
  border-radius: $gap;
  position: absolute;
  background: $white;
  left: -(1+$circle-scale/2)*$gap;
  top: -(1+$circle-scale/2)*$gap;
}

.caption {
  background: $white;
  color: $black;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  font-size: 2em;
  text-align: center;
  width: 100%;
  font-family: Open Sans, sans-serif;
}