:root {
  --gap: 0em;
}

.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.34%;
}
.col-8 {
  width: 66.67%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.34%;
}
.col-11 {
  width: 91.67%;
}
.col-12 {
  width: 100%;
}

@media screen and (min-width: 871px) {
  .col-1-md {
    width: calc(8.33% - var(--gap));
  }
  .col-2-md {
    width: calc(16.66% - var(--gap));
  }
  .col-3-md {
    width: calc(25% - var(--gap));
  }
  .col-4-md {
    width: calc(33.33% - var(--gap));
  }
  .col-5-md {
    width: calc(41.66% - var(--gap));
  }
  .col-6-md {
    width: calc(50% - var(--gap));
  }
  .col-7-md {
    width: calc(58.34% - var(--gap));
  }
  .col-8-md {
    width: calc(66.67% - var(--gap));
  }
  .col-9-md {
    width: calc(75% - var(--gap));
  }
  .col-10-md {
    width: calc(83.34% - var(--gap));
  }
  .col-11-md {
    width: calc(91.67% - var(--gap));
  }
  .col-12-md {
    width: 100%;
  }
}

@media screen and (max-width: 870px) {
  .col-1-md,
  .col-2-md,
  .col-3-md,
  .col-4-md,
  .col-5-md,
  .col-6-md,
  .col-7-md,
  .col-8-md,
  .col-9-md,
  .col-10-md,
  .col-11-md,
  .col-12-md {
    width: 100%;
  }
}

.display-flex {
  display: flex;
  flex-direction: row;
}
  .align-items-center {
    align-items: center;
  }
  .align-items-flex-start {
    align-items: flex-start;
  }
  .align-items-left {
    align-items: left;
  }
  .flex-wrap-wrap {
    flex-wrap: wrap;
  }
  .gap {
    gap: var(--gap);
  }
  .gap-05em {
    --gap: .5em;
  }
  .gap-1em {
    --gap: 1em;
  }
  .gap-2em {
    --gap: 2em;
  }
  .gap-4em {
    --gap: 4em;
    gap: var(--gap);
  }
    .row-gap-0 {
      row-gap: 0;
    }
    .row-gap-05em {
      row-gap: .5em;
    }
    .row-gap-1em {
      row-gap: 1em;
    }
    .row-gap-2em {
      row-gap: 2em;
    }
  .justify-content-center {
    justify-content: center;
  }
  .justify-content-left {
    justify-content: left;
  }
  .justify-content-space-between {
    justify-content: space-between;
  }