// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 980px,
  // Extra large screen / wide desktop
  xl: 1276px
) !default;

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 980px,
  // Extra large screen / wide desktop
  xl: 1276px
) !default;

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns: 12 !default;
$grid-gutter-width: 40px !default;

// We don't want padding on our setup at this width
// 1276 (xl) + 28 + 28 ('container' padding left + right)
@media (min-width: 1332px) {
  .container {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

// See https://getbootstrap.com/docs/4.0/layout/grid/#example-usage
// for details on how to use breakpoints, like so:
//
// .className {
//   @include media-breakpoint-up(sm) {
//     // do your thing
//   }
// }
//
// @include media-breakpoint-up(sm) { ... }
// @include media-breakpoint-up(md) { ... }
// @include media-breakpoint-up(lg) { ... }
// @include media-breakpoint-up(xl) { ... }
// etc...

@import '../../../node_modules/bootstrap-4-grid/scss/breakpoints/mixins/breakpoints';

// Make all the stack-able columns responsive on mobile
.col-md-6 {
  @include media-breakpoint-between(sm, md) {
    margin-top: $responsive-spacing-top;
    &:nth-of-type(1),
    &:nth-of-type(2) {
      margin-top: 0;
    }
  }
}

// .col-12 needs to have priority over .col-6 for correct margins.
.col-md-6.col-12,
.col-12 {
  @include media-breakpoint-between(xs, sm) {
    margin-top: $responsive-spacing-top;
    &:first-child {
      margin-top: 0;
    }
    // Special scenarios when re-ordering columns
    &.order-1 {
      margin-top: 0;
    }
    &.order-2:first-child {
      margin-top: $responsive-spacing-top;
    }
  }
}
// // Reset the above on certain sections
// .section__something {
//   .col-12 {
//     @media (max-width: 767px) {
//       margin-top: 0;
//     }
//   }
// }
// // Responsive spacer
// .m-t-r-sm { // 'm-t-r-sm' = (m)argin (t)op (r)esponsive (sm)
//   @media (max-width: 767px) {
//     margin-top: $responsive-spacing-top !important; // ...because of the reset above
//   }
// }
