/*--------- Media ---------*/
@media (min-width: $g-sm) {}
@media (min-width: $g-md) {}
@media (min-width: $g-lg) {}
@media (min-width: $g-xl) {}

$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;

$grid-breakpoints: (
  xs: 0,
  sm: $g-sm,
  md: $g-md,
  lg: $g-lg,
  xl: $g-xl) !default;

/*--------- CSS Set by Media ---------*/
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    // Col
    @for $i from 1 through 12 {

      .col#{$infix}-#{$i} {
        flex: 0 0 (100% * $i / 12);
        max-width: 100% * $i / 12;
        padding: 0;
      }
    }
  }
}

// SIZE
@mixin wh-100 {
  width: 100%;
  height: 100%;
}

// FLEX
@mixin flex-xy-center {
  justify-content: center;
  align-items: center;
}

// PHOTO SET
@mixin photo-contain {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@mixin photo-cover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

// POSITION
@mixin xy-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// OPACITY
@mixin opacity-0 {
  opacity: 0;
  pointer-events: none;
}
@mixin opacity-1 {
  opacity: 1;
  pointer-events: initial;
}