// Layout Utilities

.inline       { display: inline; }
.block        { display: block; }
.inline-block { display: inline-block; }

.oh    { overflow: hidden; }
.left  { float: left; }
.right { float: right; }

.clearfix {
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

.fit { max-width: 100%; }

.full-width { width: 100%; }
.half-width { width: 50%; }

// Responsive states
.mobile-show { display: none !important; }
@media screen and (max-width: 48em) {
  .mobile-show,
  .mobile-block  { display: block !important; }
  .mobile-block  { width: 100%; }
  .mobile-hide   { display: none !important; }
  .mobile-center { text-align: center; }
}


// Layout Utilities

.inline       { display: inline; }
.block        { display: block; }
.inline-block { display: inline-block; }

.oh    { overflow: hidden; }
.left  { float: left; }
.right { float: right; }

.clearfix {
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

.fit { max-width: 100%; }

.full-width { width: 100%; }
.half-width { width: 50%; }

// Responsive states
.mobile-show { display: none !important; }
@media screen and (max-width: $breakpoint-desktop) {
  .mobile-show,
  .mobile-block  { display: block !important; }
  .mobile-block  { width: 100%; }
  .mobile-hide   { display: none !important; }
  .mobile-center { text-align: center; }
}


Use breakpoint variable in media query.
Use breakpoint variable in media query.
