@each $breakpoint, $value in $breakpoints {

  .u-hidden-max#{$breakpoint} {

    &:empty + .u-hidden-peekaboo::before {
      content: '🙉';
    }

    @media (max-width: $value - 1px) {
      display: none;

      &:empty + .u-hidden-peekaboo::before {
        content: '🙈';
      }

    }

  }

  .u-hidden-min#{$breakpoint} {

    &:empty + .u-hidden-peekaboo::before {
      content: '🙉';
    }

    @media (min-width: $value) {
      display: none;

      &:empty + .u-hidden-peekaboo::before {
        content: '🙈';
      }

    }

  }

}