_grids.scss

// Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/)
// See: dist/css/bootstrap-grid.css
// Copyright 2011-2021 The Bootstrap Authors
// Copyright 2011-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@use 'sass:math';

$gutter-widths: $spacings;

.sd-container,
.sd-container-fluid,
.sd-container-lg,
.sd-container-md,
.sd-container-sm,
.sd-container-xl {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sd-gutter-x, 0.75rem);
  padding-right: var(--sd-gutter-x, 0.75rem);
  width: 100%;
}

@media (min-width: $media-min-sm) {
  .sd-container-sm,
  .sd-container {
    max-width: $media-max-sm;
  }
}

@media (min-width: $media-min-md) {
  .sd-container-md,
  .sd-container-sm,
  .sd-container {
    max-width: $media-max-md;
  }
}

@media (min-width: $media-min-lg) {
  .sd-container-lg,
  .sd-container-md,
  .sd-container-sm,
  .sd-container {
    max-width: $media-max-lg;
  }
}

@media (min-width: $media-min-xl) {
  .sd-container-xl,
  .sd-container-lg,
  .sd-container-md,
  .sd-container-sm,
  .sd-container {
    max-width: $media-max-xl;
  }
}

.sd-row {
  --sd-gutter-x: 1.5rem;
  --sd-gutter-y: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: calc(var(--sd-gutter-y) * -1);
  margin-right: calc(var(--sd-gutter-x) * -0.5);
  margin-left: calc(var(--sd-gutter-x) * -0.5);
}

.sd-row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--sd-gutter-x) * 0.5);
  padding-left: calc(var(--sd-gutter-x) * 0.5);
  margin-top: var(--sd-gutter-y);
}

.sd-col {
  flex: 1 0 0%;
  -ms-flex: 1 0 0%;
}

.sd-row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

@for $i from 1 through 12 {
  .sd-row-cols-#{$i} {
    > * {
      flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      width: math.div(100%, $i);
    }
  }
}

@each $cat, $width in $media-widths {
  @media (min-width: $width) {
    .sd-col-#{$cat} {
      flex: 1 0 0%;
      -ms-flex: 1 0 0%;
    }

    .sd-row-cols-#{$cat}-auto {
      flex: 1 0 auto;
      -ms-flex: 1 0 auto;
      width: 100%;
    }

    @for $i from 1 through 12 {
      .sd-row-cols-#{$cat}-#{$i} {
        > * {
          flex: 0 0 auto;
          -ms-flex: 0 0 auto;
          width: math.div(100%, $i);
        }
      }
    }
  }
}

.sd-col-auto {
  flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  width: auto;
}

@for $i from 1 through 12 {
  .sd-col-#{$i} {
    flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    width: 100% * math.div($i, 12);
  }
}

@each $cat, $width in $gutter-widths {
  .sd-g-#{$cat},
  .sd-gy-#{$cat} {
    --sd-gutter-y: #{$width};
  }
  .sd-g-#{$cat},
  .sd-gx-#{$cat} {
    --sd-gutter-x: #{$width};
  }
}

@each $cat, $width in $media-widths {
  @media (min-width: $width) {
    .sd-col-#{$cat}-auto {
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
    }
    @for $i from 1 through 12 {
      .sd-col-#{$cat}-#{$i} {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100% * math.div($i, 12);
      }
    }
    @each $gcat, $gwidth in $gutter-widths {
      .sd-g-#{$cat}-#{$gcat},
      .sd-gy-#{$cat}-#{$gcat} {
        --sd-gutter-y: #{$gwidth};
      }
      .sd-g-#{$cat}-#{$gcat},
      .sd-gx-#{$cat}-#{$gcat} {
        --sd-gutter-x: #{$gwidth};
      }
    }
  }
}

.sd-flex-row-reverse {
  flex-direction: row-reverse !important;
}