Extend Zurb Foundation visibility classes with a tiny media query

For a Zurb Foundation fan who wants a challenge. I am having problems with my brain around the Zurb Foundation 5 visibility classes. I understand what is happening conceptually, but I'm trying to add an extra size for the visibility classes, namely “tiny”. I worked in a “tiny” media query for all the other components that I need, but this visibility stuff kicks my ass. I just can’t keep track of what this is for.

Here is the original _visibility.scss file .

Anybody want to take a picture when operating in .show-for-tiny, .show-for-tiny-only, .hide-for-small-down, and all other additions needed in all media inquiries?

(adding more details due to feedback) When viewing the _visibility.scss reference file, you can see that there are dozens of show and hide classes. What would the code have to look like a “tiny” size for all media queries (tiny, small, large, xlarge, xxlarge)?

Actual size ranges are not that important to me, as they are likely to be updated later. But if you want to get an estimate, it looks like this:

$tiny-range: (0px, 480px); // (0em, 30em)
$small-range: (481px, 640px); // (30.063em, 40em);
$medium-range: (641px, 1024px); // (40.063em, 64em);
$large-range: (1025px, 1440px); // (64.063em, 90em);
$xlarge-range: (1441px, 1920px); // (90.063em, 120em);
$xxlarge-range: (1921px); //(120.063em);