.grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 3.2rem 0;
  @include media-min($medium) {
    gap: var(--grid-column-gutter);
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.grid-cols-1 {
  @include media-min($medium) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.grid-cols-2 {
  @include media-min($medium) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sm\:grid-cols-2 {
  gap: var(--grid-column-gutter);
  @include media-max($medium) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grid-cols-3 {
  @include media-min($medium) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @include media-min($large) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.grid-cols-4 {
  @include media-min($medium) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @include media-min($large) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grid-cols-6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  @include media-min($medium) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @include media-min($large) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @include media-min($xlarge) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@for $var from 1 to 13 {
  .col-span-#{$var} {
    grid-column: span #{$var} / span #{$var};
  }
  @include media-min($medium) {
    .md\:col-span-#{$var} {
      grid-column: span #{$var} / span #{$var};
    }
  }

  .col-start-#{$var} {
    grid-column-start: #{$var} !important;
  }
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.item-start {
  align-items: start;
}

.item-center {
  align-items: center;
}

.flex-1 {
  flex: 1;
}

@include media-min($small) {
  .sm\:flex {
    display: flex;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
}

@include media-min($medium) {
  .md\:flex {
    display: flex;
  }
  .md\:flex-column {
    flex-direction: column;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  .md\:item-center {
    align-items: center;
  }
}

@include media-min($large) {
  .lg\:flex {
    display: flex;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
}

@include media-min($xlarge) {
  .xlg\:flex {
    display: flex;
  }
  .xlg\:flex-row {
    flex-direction: row;
  }
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.align-middle {
  vertical-align: middle;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.z-1 {
  z-index: 1;
}

.-top-20px {
  top: -2rem;
}

.-right-30px {
  right: -3rem;
}

.overflow-hidden {
  overflow: hidden;
}