// * пока только три варианта:
// 320-480(iphone)
// 480-768(ipad), но среднее не особо надо, оно промежуточное
// 768 -1200(imac)

// • Smart Phones (Portrait) 320px Wide (4 Columns)
// • Smart Phones (Landscape) 480px Wide (6 Columns)
// • Tablets (Portrait) 720px Wide (9 Columns)
// • Tablets (Landscape), Laptops, Small Monitors 960px Wide (12 Columns)
// • Larger Desktops 1200px Wide (15 Columns)

$smart-width: 480px
$tablet-width: 768px
$desktop-width: 1200px

@mixin smart
  @media only screen and (max-width: #{$tablet-width})
    @content
@mixin tablet
  @media only screen and (min-width: #{$tablet-width+1}) and (max-width: #{$desktop-width}) 
    @content
@mixin desktop
  @media only screen and (min-width: #{$desktop-width+1})
    @content