.square {
  position: relative;
  height: 0;
  padding-bottom: 100%;
  border-radius: $border-radius;

  .square-item {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  &.square50 {
    padding-bottom: 50%;
  }

  &.square30 {
    padding-bottom: 30%;
  }


}