/* Clarity Template - Grid Utilities */

.columns-12 {
  display: grid;
  column-gap: 2vw;
  grid-template-columns: repeat(12, 1fr);
}

.columns-10 {
  display: grid;
  column-gap: 2vw;
  grid-template-columns: repeat(10, 1fr);
}

.columns-8 {
  display: grid;
  column-gap: 2vw;
  grid-template-columns: repeat(8, 1fr);
}

.columns-6 {
  display: grid;
  column-gap: 2vw;
  grid-template-columns: repeat(6, 1fr);
}

.columns-5 {
  display: grid;
  column-gap: 2vw;
  grid-template-columns: repeat(5, 1fr);
}

.columns-4 {
  display: grid;
  column-gap: 2vw;
  grid-template-columns: repeat(4, 1fr);
}

.columns-3 {
  display: grid;
  column-gap: 2vw;
  grid-template-columns: repeat(3, 1fr);
}

.columns-2 {
  display: grid;
  column-gap: 2vw;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 992px) {
  .columns-12 {
    grid-template-columns: repeat(6, 1fr);
  }
  .columns-10 {
    grid-template-columns: repeat(5, 1fr);
  }
  .columns-8 {
    grid-template-columns: repeat(4, 1fr);
  }
  .columns-6 {
    grid-template-columns: repeat(3, 1fr);
  }
  .columns-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 769px) {
  .columns-12 {
    grid-template-columns: repeat(3, 1fr);
  }
  .columns-2 {
    grid-template-columns: repeat(1, 1fr);
  }
}