_visibility.scss

// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group visibility
////

.hide-for-large {
  display: none;
  mso-hide: all; // hide selected elements in Outlook 2007-2013
  overflow: hidden;
  max-height: 0;
  font-size: 0;
  width: 0;
  line-height: 0;

  @media only screen and (max-width: #{$global-breakpoint}) {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    max-height: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

table.body table.container .hide-for-large * {
  mso-hide: all; // hide selected elements in Outlook 2007-2013
}

table.body table.container .hide-for-large,
table.body table.container .row.hide-for-large {
  @media only screen and (max-width: #{$global-breakpoint}) {
    display: table !important;
    width: 100% !important;
  }
}

table.body table.container .callout-inner.hide-for-large {
  @media only screen and (max-width: #{$global-breakpoint}) {
    display: table-cell !important;
    width: 100% !important;
  }
}

table.body table.container .show-for-large {
  @media only screen and (max-width: #{$global-breakpoint}) {
    display: none !important;
    width: 0;
    mso-hide: all; // hide selected elements in Outlook 2007-2013
    overflow: hidden;
  }
}

// [todo] add image resets
// img {
//   max-height: 0;
//   width: 0;
// }
// in media query
// img { 
//   max-height: none !important; 
//   width: auto !important; 
// }