:root {
  --z-gutter-x: 1.5rem;
  --z-gutter-y: 0.75rem;

  --spacer: .25rem;
}

/* Container */
.z-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1320px;
}

.z-grid {
  display: grid !important;
}

/* Rows */
.z-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--z-gutter-y));
  margin-right: calc(-0.5 * var(--z-gutter-x));
  margin-left: calc(-0.5 * var(--z-gutter-x));
}

.z-row > * {
  max-width: 100%;
  padding-right: calc(var(--z-gutter-x) * 0.5);
  padding-left: calc(var(--z-gutter-x) * 0.5);
  margin-top: var(--z-gutter-y);
}

.gap-1 {
  gap: var(--space)
}

.gap-2 {
  gap: calc(var(--spacer) * 2);
}

.gap-3 {
  gap: calc(var(--spacer) * 3);
}

.gap-4 {
  gap: calc(var(--spacer) * 4);
}

.gap-5 {
  gap: calc(var(--spacer) * 5);
}

/* Columns */
[class^="z-col-"] {
  padding-right: 15px;
  padding-left: 15px;
  flex-grow: 1;
}

/* Column widths */
.z-col-1 { flex: 0 0 8.33%; max-width: 8.33%; }
.z-col-2 { flex: 0 0 16.66%; max-width: 16.66%; }
.z-col-3 { flex: 0 0 25%; max-width: 25%; }
.z-col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
.z-col-5 { flex: 0 0 41.66%; max-width: 41.66%; }
.z-col-6 { flex: 0 0 50%; max-width: 50%; }
.z-col-7 { flex: 0 0 58.33%; max-width: 58.33%; }
.z-col-8 { flex: 0 0 66.66%; max-width: 66.66%; }
.z-col-9 { flex: 0 0 75%; max-width: 75%; }
.z-col-10 { flex: 0 0 83.33%; max-width: 83.33%; }
.z-col-11 { flex: 0 0 91.66%; max-width: 91.66%; }
.z-col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
  .z-col-sm-1 { flex: 0 0 8.33%; max-width: 8.33%; }
  .z-col-sm-2 { flex: 0 0 16.66%; max-width: 16.66%; }
  .z-col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .z-col-sm-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  .z-col-sm-5 { flex: 0 0 41.66%; max-width: 41.66%; }
  .z-col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .z-col-sm-7 { flex: 0 0 58.33%; max-width: 58.33%; }
  .z-col-sm-8 { flex: 0 0 66.66%; max-width: 66.66%; }
  .z-col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .z-col-sm-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .z-col-sm-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .z-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
  .z-col-md-1 { flex: 0 0 8.33%; max-width: 8.33%; }
  .z-col-md-2 { flex: 0 0 16.66%; max-width: 16.66%; }
  .z-col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .z-col-md-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  .z-col-md-5 { flex: 0 0 41.66%; max-width: 41.66%; }
  .z-col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .z-col-md-7 { flex: 0 0 58.33%; max-width: 58.33%; }
  .z-col-md-8 { flex: 0 0 66.66%; max-width: 66.66%; }
  .z-col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .z-col-md-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .z-col-md-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .z-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
  .z-col-lg-1 { flex: 0 0 8.33%; max-width: 8.33%; }
  .z-col-lg-2 { flex: 0 0 16.66%; max-width: 16.66%; }
  .z-col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .z-col-lg-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  .z-col-lg-5 { flex: 0 0 41.66%; max-width: 41.66%; }
  .z-col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .z-col-lg-7 { flex: 0 0 58.33%; max-width: 58.33%; }
  .z-col-lg-8 { flex: 0 0 66.66%; max-width: 66.66%; }
  .z-col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .z-col-lg-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .z-col-lg-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .z-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
  .z-col-xl-1 { flex: 0 0 8.33%; max-width: 8.33%; }
  .z-col-xl-2 { flex: 0 0 16.66%; max-width: 16.66%; }
  .z-col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .z-col-xl-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  .z-col-xl-5 { flex: 0 0 41.66%; max-width: 41.66%; }
  .z-col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .z-col-xl-7 { flex: 0 0 58.33%; max-width: 58.33%; }
  .z-col-xl-8 { flex: 0 0 66.66%; max-width: 66.66%; }
  .z-col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .z-col-xl-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .z-col-xl-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .z-col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1400px) {
  .z-col-xxl-1 { flex: 0 0 8.33%; max-width: 8.33%; }
  .z-col-xxl-2 { flex: 0 0 16.66%; max-width: 16.66%; }
  .z-col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
  .z-col-xxl-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  .z-col-xxl-5 { flex: 0 0 41.66%; max-width: 41.66%; }
  .z-col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
  .z-col-xxl-7 { flex: 0 0 58.33%; max-width: 58.33%; }
  .z-col-xxl-8 { flex: 0 0 66.66%; max-width: 66.66%; }
  .z-col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
  .z-col-xxl-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .z-col-xxl-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .z-col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Responsive breakpoints */
@media (min-width: 576px) {
  .z-container { max-width: 540px; }
}
@media (min-width: 768px) {
  .z-container { max-width: 720px; }
}
@media (min-width: 992px) {
  .z-container { max-width: 960px; }
}
@media (min-width: 1200px) {
  .z-container { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .z-container { max-width: 1320px; }
}