/* Grid variables */
:root {
  --wk-grid-columns: 12;
  --wk-grid-gutter-width: 2rem;
}

.wk-grid,
.wk-grid-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * -0.5);
  row-gap: var(--wk-grid-gutter-y, var(--wk-grid-gutter-width));
}

.wk-col-1 {
  flex: 0 0 auto;
  width: calc(8.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-2 {
  flex: 0 0 auto;
  width: calc(
    16.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
  );
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-3 {
  flex: 0 0 auto;
  width: calc(25% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-4 {
  flex: 0 0 auto;
  width: calc(
    33.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
  );
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-5 {
  flex: 0 0 auto;
  width: calc(
    41.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
  );
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-6 {
  flex: 0 0 auto;
  width: calc(50% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-7 {
  flex: 0 0 auto;
  width: calc(
    58.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
  );
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-8 {
  flex: 0 0 auto;
  width: calc(
    66.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
  );
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-9 {
  flex: 0 0 auto;
  width: calc(75% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-10 {
  flex: 0 0 auto;
  width: calc(
    83.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
  );
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-11 {
  flex: 0 0 auto;
  width: calc(
    91.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
  );
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-12 {
  flex: 0 0 auto;
  width: calc(100% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
  margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
}
.wk-col-auto {
  flex: 1 0 0px;
  width: auto;
}

@media (min-width: 640px) {
  .sm\:wk-col-1 {
    flex: 0 0 auto;
    width: calc(
      8.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-2 {
    flex: 0 0 auto;
    width: calc(
      16.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-3 {
    flex: 0 0 auto;
    width: calc(25% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-4 {
    flex: 0 0 auto;
    width: calc(
      33.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-5 {
    flex: 0 0 auto;
    width: calc(
      41.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-6 {
    flex: 0 0 auto;
    width: calc(50% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-7 {
    flex: 0 0 auto;
    width: calc(
      58.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-8 {
    flex: 0 0 auto;
    width: calc(
      66.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-9 {
    flex: 0 0 auto;
    width: calc(75% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-10 {
    flex: 0 0 auto;
    width: calc(
      83.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-11 {
    flex: 0 0 auto;
    width: calc(
      91.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-12 {
    flex: 0 0 auto;
    width: calc(100% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .sm\:wk-col-auto {
    flex: 1 0 0px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .md\:wk-col-1 {
    flex: 0 0 auto;
    width: calc(
      8.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-2 {
    flex: 0 0 auto;
    width: calc(
      16.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-3 {
    flex: 0 0 auto;
    width: calc(25% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-4 {
    flex: 0 0 auto;
    width: calc(
      33.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-5 {
    flex: 0 0 auto;
    width: calc(
      41.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-6 {
    flex: 0 0 auto;
    width: calc(50% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-7 {
    flex: 0 0 auto;
    width: calc(
      58.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-8 {
    flex: 0 0 auto;
    width: calc(
      66.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-9 {
    flex: 0 0 auto;
    width: calc(75% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-10 {
    flex: 0 0 auto;
    width: calc(
      83.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-11 {
    flex: 0 0 auto;
    width: calc(
      91.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-12 {
    flex: 0 0 auto;
    width: calc(100% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .md\:wk-col-auto {
    flex: 1 0 0px;
    width: auto;
  }
}

@media (min-width: 1024px) {
  .lg\:wk-col-1 {
    flex: 0 0 auto;
    width: calc(
      8.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-2 {
    flex: 0 0 auto;
    width: calc(
      16.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-3 {
    flex: 0 0 auto;
    width: calc(25% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-4 {
    flex: 0 0 auto;
    width: calc(
      33.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-5 {
    flex: 0 0 auto;
    width: calc(
      41.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-6 {
    flex: 0 0 auto;
    width: calc(50% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-7 {
    flex: 0 0 auto;
    width: calc(
      58.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-8 {
    flex: 0 0 auto;
    width: calc(
      66.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-9 {
    flex: 0 0 auto;
    width: calc(75% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-10 {
    flex: 0 0 auto;
    width: calc(
      83.333333% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-11 {
    flex: 0 0 auto;
    width: calc(
      91.666667% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width))
    );
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-12 {
    flex: 0 0 auto;
    width: calc(100% - var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)));
    margin: 0 calc(var(--wk-grid-gutter-x, var(--wk-grid-gutter-width)) * 0.5);
  }
  .lg\:wk-col-auto {
    flex: 1 0 0px;
    width: auto;
  }
}