/**
 * Defines the grid layout used by the CTF Angular app.
 * The main grid consists of 24 columns across the full viewport width.
 * The styles below allows one define a size in columns that maintain the
 * proportions of the grid with respect to the viewport.
 *
 * E.g. To define a container element that is 5 grid columns wide, one can
 * achieve that by applying the 'grid-col-5' CSS class to that element.
 */
.grid-col-1 {
  width: calc((1 / 24) * 100vw);
}
.grid-col-2 {
  width: calc((2 / 24) * 100vw);
}
.grid-col-3 {
  width: calc((3 / 24) * 100vw);
}
.grid-col-4 {
  width: calc((4 / 24) * 100vw);
}
.grid-col-5 {
  width: calc((5 / 24) * 100vw);
}
.grid-col-6 {
  width: calc((6 / 24) * 100vw);
}
.grid-col-7 {
  width: calc((7 / 24) * 100vw);
}
.grid-col-8 {
  width: calc((8 / 24) * 100vw);
}
.grid-col-9 {
  width: calc((9 / 24) * 100vw);
}
.grid-col-10 {
  width: calc((10 / 24) * 100vw);
}
.grid-col-11 {
  width: calc((11 / 24) * 100vw);
}
.grid-col-12 {
  width: calc((12 / 24) * 100vw);
}
.grid-col-13 {
  width: calc((13 / 24) * 100vw);
}
.grid-col-14 {
  width: calc((14 / 24) * 100vw);
}
.grid-col-15 {
  width: calc((15 / 24) * 100vw);
}
.grid-col-16 {
  width: calc((16 / 24) * 100vw);
}
.grid-col-17 {
  width: calc((17 / 24) * 100vw);
}
.grid-col-18 {
  width: calc((18 / 24) * 100vw);
}
.grid-col-19 {
  width: calc((19 / 24) * 100vw);
}
.grid-col-20 {
  width: calc((20 / 24) * 100vw);
}
.grid-col-21 {
  width: calc((21 / 24) * 100vw);
}
.grid-col-22 {
  width: calc((22 / 24) * 100vw);
}
.grid-col-23 {
  width: calc((23 / 24) * 100vw);
}
.grid-col-24 {
  width: calc((24 / 24) * 100vw);
}