@import "2-mixins";

/* Breakpoints
/* ============ */
/**/
@custom-media --palm (width <= 50em);
@custom-media --palmbig (width <= 47.95em);
@custom-media --lap (width >= 47.95em) and (width <=56.25em);
@custom-media --lapdown (width <= 56.25em);
@custom-media --desk (width >= 56.25em);

@custom-media --sm-viewport (width <= 599px);
@custom-media --md-viewport (width <= 600px);
@custom-media --lg-viewport (width => 1600px);


/* 
MATERIAL DESIGN BREAKPOINTS (as a reference)
Single level of content hierarchy on the screen 
@custom-media --sm-viewport (max-width: 599px);

/* Two levels of content hierarchy on the screen 
@custom-media --md-viewport (min-width: 600px);

/* Max screen widths 
@custom-media --lg-viewport (min-width: 1600px);

/* Grid Breakpoints 
@custom-media --4-col-grid  (orientation: portrait) and (max-width: 479px);
@custom-media --8-col-grid  (orientation: portrait) and (min-width: 480px) and (max-width: 839px);
@custom-media --12-col-grid (orientation: portrait) and (min-width: 840px);

/* Phone Breakpoints 
@custom-media --sm-phone           (orientation: portrait) and (max-width: 359px);
@custom-media --md-phone           (orientation: portrait) and (min-width: 360px) and (max-width: 399px);
@custom-media --lg-phone           (orientation: portrait) and (min-width: 400px);
@custom-media --sm-phone-landscape (orientation: landscape) and (max-width: 599px);
@custom-media --md-phone-landscape (orientation: landscape) and (min-width: 600px) and (max-width: 719px);
@custom-media --lg-phone-landscape (orientation: landscape) and (min-width: 720px);

/* Tablet Breakpoints 
@custom-media --sm-tablet           (orientation: portrait) and (max-width: 719px);
@custom-media --lg-tablet           (orientation: portrait) and (min-width: 720px);
@custom-media --sm-tablet-landscape (orientation: landscape) and (max-width: 1023px);
@custom-media --lg-tablet-landscape (orientation: landscape) and (min-width: 1024px);*/


$breakpoint-has-widths: (sm-viewport, md-viewport, lg-viewport) !default;

.maxwidth-container{
  margin: auto;
  width: 90%;
  @media(--palm){
    max-width: 90%;
  }
  @media(--lap){
    max-width: 50em;
  }
  @media(--desk){
    max-width: 80em;
  }
}

.baselinegrid{
  @mixin baselinegrid $faintborders;
  background-repeat: repeat-y;
  background-size: 100% 1.5rem;
}