.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  /* max-width: 192rem; */
}

[class*="col-"] {
  flex: 0 0 auto;
}

.col-1 { width: 8.3333%; }
.col-2 { width: 16.6667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.3333%; }
.col-5 { width: 41.6667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333%; }
.col-8 { width: 66.6667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%; }

.offset-1 { margin-left: 8.3333%; }
.offset-2 { margin-left: 16.6667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.3333%; }
.offset-5 { margin-left: 41.6667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.3333%; }
.offset-8 { margin-left: 66.6667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.3333%; }
.offset-11 { margin-left: 91.6667%; }

/*
 * Mobile: col-10 - 10 col with offset-1, always has padding-left 20px and border-left
 * Desktop: col-8 - 8 col with offset-2, always has padding-left 30px and border-left
 */
.col-centred {
  margin-left: 8.3333%;
  padding-left: 2rem;
  width: 83.3333%;

  @media (min-width: 768px) {
    padding-left: 2.7rem;
  }

  @media (min-width: 1280px) {
    margin-left: 16.6667%;
    padding-left: 3rem;
    width: 66.6667%;
  }
}

/*
 * Mobile: col-10 - 10 col with offset-1, always has padding-left 20px and border-left
 * Desktop: col-9 - 9 col with offset-2, always has padding-left 30px and border-left
 */
.col-centred-offset {
  margin-left: 8.3333%;
  padding-left: 2rem;
  width: 83.3333%;

  @media (min-width: 1280px) {
    margin-left: 16.6667%;
    padding-left: 3rem;
    width: 75%;
  }
}

/*
 * Mobile: col-11 11 col with offset-1, always has padding-left 20px and border-left
 * Tablet: col-10 - 10 col with offset-1, always has padding-left 27px and border-left
 * Desktop: col-8 - 8 col with offset-2, always has padding-left 30px and border-left
 */
.col-offset {
  margin-left: 8.3333%;
  padding-left: 2rem;
  width: 91.6667%;

  @media (min-width: 768px) {
    padding-left: 2.7rem;
    width: 83.3333%
  }

  @media (min-width: 1280px) {
    margin-left: 16.6667%;
    padding-left: 3rem;
    width: 66.6667%;
  }
}

/*
For Decorations - Mobile
*/
.step {
  height: 4rem;
  margin-top: -3.9rem;
  position: relative;
}

.step--border {
  border-top: var(--border-component);
}

.step--border-left {
  border-left: var(--border-component);
}

.step--border-right {
  border-right: var(--border-component);
}

/* 1-col mobile / 2-col desktop */
.step-1-2-col-left {
  width: 8.3333%;

  @media (min-width: 1280px) {
    width: 16.6667%;
  }
}

/* 1-col mobile / 4-col desktop */
.step-1-4-col-left {
  width: 8.3333%;

  @media (min-width: 1280px) {
    width: 33.3333%;
  }
}

/* 1-col mobile / 10-col desktop */
.step-1-10-col-left {
  width: 8.3333%;

  @media (min-width: 768px) {
    width: 83.3333%;
  }
}

.step-6-col-right {
  margin-left: 50%;
  width: 50%;

  + .component-container__inner::before {
    height: 100%;
    top: 0;
  }
}

.step-6-col-left {
  margin-right: 50%;
  width: 50%;

  + .component-container__inner::before {
    height: 100%;
    top: 0;
  }
}

/* 11-col mobile / 10-col desktop */
.step-11-col-left {
  width: 91.6667%;

  @media (min-width: 768px) {
    width: 83.3333%;
  }
}

/* 11-col mobile, offset-1 / 10-col desktop, offset-2 */
.step-11-col-right {
  margin-left: 8.3333%;
  width: 91.6667%;

  @media (min-width: 1280px) {
    margin-left: 16.6667%;
    width: 83.3333%;
  }
}

.step-4-col-right {
  margin-left: 66.6667%;
  width: 33.3333%;

  + .component-container__inner::before {
    height: 100%;
    top: 0;
  }
}

/* 1-col mobile / 8-col right desktop, offset-4 */
.step-1-8-col-right {
  width: 8.3333%;

  @media (min-width: 768px) {
    margin-left: 33.3333%;
    width: 66.6667%;
  }
}

/* 1-col mobile / 10-col right desktop, offset-2 */
.step-1-col-left {
  width: 8.3333%;

  @media (min-width: 1280px) {
    margin-left: 16.6667%;
    width: 83.3333%;
  }
}

/* Components */
.component-container {
  color: var(--core-dark-blue);
}

.component-container--border {
  border-top: var(--border-component);
}

.component-container__inner {
  max-width: 1920px;
  position: relative;

  /* margin: 0 auto; */

  &::before {
    content: "";
    height: calc(100% + 4rem);
    width: 0.1rem;
    background-color: var(--greyscale-slate-2);
    position: absolute;
    top: -4rem;
    left: 0;
    bottom: 0;
  }
}