.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-width-tablet);
  }
}
@media (min-width: 992px) {
  .container {
    max-width: var(--container-width-desktop);
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
}

[class*='col-tablet-'],
[class*='col-desktop-'] {
  width: 100%;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-tablet-1 {
    width: 8.3333%;
  }
  .col-tablet-2 {
    width: 16.6667%;
  }
  .col-tablet-3 {
    width: 25%;
  }
  .col-tablet-4 {
    width: 33.3333%;
  }
  .col-tablet-5 {
    width: 41.6667%;
  }
  .col-tablet-6 {
    width: 50%;
  }
  .col-tablet-7 {
    width: 58.3333%;
  }
  .col-tablet-8 {
    width: 66.6667%;
  }
  .col-tablet-9 {
    width: 75%;
  }
  .col-tablet-10 {
    width: 83.3333%;
  }
  .col-tablet-11 {
    width: 91.6667%;
  }
  .col-tablet-12 {
    width: 100%;
  }
}

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