{"version":3,"sources":["flexigridcss/base/_container.scss","flexigridcss/container.css","utlities/mixins/_media-queries.scss"],"names":[],"mappings":"AACA;;EACE,YAAY;EACZ,aAAa;EACb,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,YAAY;EACZ,kBAAkB;ACCpB;;ADOA;EACE,WAAW;EACX,eAAe;EACf,iBAAqC;ACJvC;;ACoCE;EFnCF;IAMI,WAAW;IACX,eAAe;IACf,eAAgC;ECFlC;AACF;;ACCI;EFRJ;IAYI,YAAY;IACZ,gBAAgB;IAChB,eAAyC;ECA3C;AACF;;ACPI;EFRJ;IAkBI,YAAY;IACZ,gBAAgB;IAChB,iBAA0C;ECE5C;AACF;;ACfI;EFRJ;IAuBI,aAAa;IACb,iBAAiB;IACjB,iBAAiC;ECKnC;AACF;;ACvBI;EFRJ;IA4BI,aAAa;IACb,iBAAiB;IACjB,iBAAqC;ECQvC;AACF;;ADL+B;EAlC/B;IAmCI,cAAc;ECShB;AACF;;ADNA;EACE,WAAW;EACX,eAAe;ACSjB;;ACfE;EFIF;IAKI,eAAgC;ECWlC;AACF;;AChDI;EF+BJ;IASI,eAAyC;ECa3C;AACF;;ACtDI;EF+BJ;IAaI,iBAA0C;ECe5C;AACF;;AC5DI;EF+BJ;IAgBI,iBAAiC;ECkBnC;AACF;;AClEI;EF+BJ;IAmBI,iBAAqC;ECqBvC;AACF;;ADlB+B;EAvB/B;IAwBI,cAAc;ECsBhB;AACF;;ACnDE;EFgCF;IAEI,wBAAyC;ECsB3C;AACF;;ACpFI;EF2DJ;IAMI,wBAAkD;ECwBpD;AACF;;AC1FI;EF2DJ;IAUI,0BAAmD;EC0BrD;AACF;;AChGI;EF2DJ;IAcI,0BAA0C;EC4B5C;AACF;;ACtGI;EF2DJ;IAkBI,0BAA8C;EC8BhD;AACF","file":"container.css","sourcesContent":["// Container will always be grid... If not supported then it will just be the width it needs to be...\n%container-core {\n  margin: auto;\n  min-height: 0;\n  min-width: 0;\n  width: 100%;\n  max-height: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.container,\n.container-fluid {\n  @extend %container-core;\n}\n\n.container {\n  width: 100%;\n  max-width: 100%;\n  padding: 0 #{$grid-space-big-desktop};\n\n  @include mobile-only {\n    width: 100%;\n    max-width: 100%;\n    padding: 0 #{$grid-space-mobile};\n  }\n\n  @include breakpoint(568) {\n    width: 568px;\n    max-width: 568px;\n    padding: 0 #{$grid-space-portrait-tablet};\n  }\n\n  @include tablet-landscape-up {\n    width: 768px;\n    max-width: 768px;\n    padding: 0 #{$grid-space-landscape-tablet};\n  }\n  @include desktop-up {\n    width: 1024px;\n    max-width: 1024px;\n    padding: 0 #{$grid-space-desktop};\n  }\n  @include big-desktop-up {\n    width: 1280px;\n    max-width: 1280px;\n    padding: 0 #{$grid-space-big-desktop};\n  }\n\n  // If doesn't support grid display: block;\n  @supports not (display: grid) {\n    display: block;\n  }\n}\n\n.container-fluid {\n  width: 100%;\n  max-width: 100%;\n\n  @include mobile-only {\n    padding: 0 #{$grid-space-mobile};\n  }\n\n  @include breakpoint(568) {\n    padding: 0 #{$grid-space-portrait-tablet};\n  }\n\n  @include tablet-landscape-up {\n    padding: 0 #{$grid-space-landscape-tablet};\n  }\n  @include desktop-up {\n    padding: 0 #{$grid-space-desktop};\n  }\n  @include big-desktop-up {\n    padding: 0 #{$grid-space-big-desktop};\n  }\n\n  // If doesn't support grid display: block;\n  @supports not (display: grid) {\n    display: block;\n  }\n}\n\n.grid-gap {\n  @include mobile-only {\n    grid-gap: calc(#{$grid-space-mobile} * 2);\n  }\n\n  @include breakpoint(568) {\n    grid-gap: calc(#{$grid-space-portrait-tablet} * 2);\n  }\n\n  @include tablet-landscape-up {\n    grid-gap: calc(#{$grid-space-landscape-tablet} * 2);\n  }\n\n  @include desktop-up {\n    grid-gap: calc(#{$grid-space-desktop} * 2);\n  }\n\n  @include big-desktop-up {\n    grid-gap: calc(#{$grid-space-big-desktop} * 2);\n  }\n}\n",".container,\n.container-fluid {\n  margin: auto;\n  min-height: 0;\n  min-width: 0;\n  width: 100%;\n  max-height: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.container {\n  width: 100%;\n  max-width: 100%;\n  padding: 0 1.6rem;\n}\n\n@media (max-width: 375px) {\n  .container {\n    width: 100%;\n    max-width: 100%;\n    padding: 0 1rem;\n  }\n}\n\n@media only screen and (min-width: 568px) {\n  .container {\n    width: 568px;\n    max-width: 568px;\n    padding: 0 1rem;\n  }\n}\n\n@media only screen and (min-width: 768px) {\n  .container {\n    width: 768px;\n    max-width: 768px;\n    padding: 0 1.6rem;\n  }\n}\n\n@media only screen and (min-width: 1024px) {\n  .container {\n    width: 1024px;\n    max-width: 1024px;\n    padding: 0 1.6rem;\n  }\n}\n\n@media only screen and (min-width: 1280px) {\n  .container {\n    width: 1280px;\n    max-width: 1280px;\n    padding: 0 1.6rem;\n  }\n}\n\n@supports not (display: grid) {\n  .container {\n    display: block;\n  }\n}\n\n.container-fluid {\n  width: 100%;\n  max-width: 100%;\n}\n\n@media (max-width: 375px) {\n  .container-fluid {\n    padding: 0 1rem;\n  }\n}\n\n@media only screen and (min-width: 568px) {\n  .container-fluid {\n    padding: 0 1rem;\n  }\n}\n\n@media only screen and (min-width: 768px) {\n  .container-fluid {\n    padding: 0 1.6rem;\n  }\n}\n\n@media only screen and (min-width: 1024px) {\n  .container-fluid {\n    padding: 0 1.6rem;\n  }\n}\n\n@media only screen and (min-width: 1280px) {\n  .container-fluid {\n    padding: 0 1.6rem;\n  }\n}\n\n@supports not (display: grid) {\n  .container-fluid {\n    display: block;\n  }\n}\n\n@media (max-width: 375px) {\n  .grid-gap {\n    grid-gap: calc(1rem * 2);\n  }\n}\n\n@media only screen and (min-width: 568px) {\n  .grid-gap {\n    grid-gap: calc(1rem * 2);\n  }\n}\n\n@media only screen and (min-width: 768px) {\n  .grid-gap {\n    grid-gap: calc(1.6rem * 2);\n  }\n}\n\n@media only screen and (min-width: 1024px) {\n  .grid-gap {\n    grid-gap: calc(1.6rem * 2);\n  }\n}\n\n@media only screen and (min-width: 1280px) {\n  .grid-gap {\n    grid-gap: calc(1.6rem * 2);\n  }\n}\n","// ----------------------------------------------------------------------\n// BREAKPOINTS\n// ----------------------------------------------------------------------\n\n$break-xxs: 375 !default; // from \"phone portrait\" size\n$break-xs: 568 !default; // from \"phone landscape\" size\n$break-small: 768 !default; // from \"tablet portrait\" size\n$break-medium: 1024 !default; // from \"desktop\" size\n$break-large: 1280 !default; // from bigger desktop size\n\n$break-points-map: (\n  xxs: $break-xxs,\n  xs: $break-xs,\n  small: $break-small,\n  medium: $break-medium,\n  large: $break-large\n);\n\n@function getBreakpoint($key) {\n  @return map-get($break-points-map, $key);\n}\n\n@mixin breakpoint($width) {\n  @if type-of($width) == number {\n    @media only screen and (min-width: $width*1px) {\n      @content;\n    }\n  } @else {\n    $break: getBreakpoint($width);\n    @media only screen and (min-width: $break*1px) {\n      @content;\n    }\n  }\n}\n\n@mixin breakpoint-between($min, $max) {\n  $minWidth: $min;\n  $maxWidth: $max;\n  @if type-of($min) != number {\n    $minWidth: getBreakpoint($min);\n  }\n  @if type-of($max) != number {\n    $maxWidth: getBreakpoint($max);\n  }\n  @media only screen and (min-width: $minWidth*1px) and (max-width: ($maxWidth*1px) - 1) {\n    @content;\n  }\n}\n\n// (max-width: 567px)\n@mixin mobile-only {\n  @media #{$mobile-only} {\n    @content;\n  }\n}\n\n// (min-width: 568px)\n@mixin tablet-portrait-up {\n  @include breakpoint(568) {\n    @content;\n  }\n}\n\n// (max-width: 568px)\n@mixin tablet-portrait-down {\n  @media #{$tablet-portrait-down} {\n    @content;\n  }\n}\n\n// (min-width: 768px)\n@mixin tablet-landscape-up {\n  @include breakpoint(768) {\n    @content;\n  }\n}\n\n// (max-width: 768px)\n@mixin tablet-landscape-down {\n  @media #{$tablet-landscape-down} {\n    @content;\n  }\n}\n\n// (min-width: 1024ox)\n@mixin desktop-up {\n  @include breakpoint(1024) {\n    @content;\n  }\n}\n\n// (max-width: 1024px)\n@mixin desktop-down {\n  @media #{$desktop-down} {\n    @content;\n  }\n}\n\n// (min-width: 1280px)\n@mixin big-desktop-up {\n  @include breakpoint(1280) {\n    @content;\n  }\n}\n\n// (max-width: 1280px)\n@mixin big-desktop-down {\n  @media #{$big-desktop-up} {\n    @content;\n  }\n}\n"]}