.full-height {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.flex { display: flex; }
.flex-column { flex-flow: column; }
.flex-wrap { flex-flow: row wrap; }
.flex-grow { flex-grow: 1; }

.gap-2 { gap: 2rem; }
.gap-6 { gap: 6rem; }
.m-gap-6 { gap: 6rem; }

.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-columns: minmax(2rem, 1fr) [content-start] min(1200px, calc(100% - 4rem)) [content-end] minmax(2rem, 1fr);
  overflow: hidden;
}

.grid .content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-start: content;
}

.content-center { align-content: center; }
.self-center { align-self: center; }

[class^=col] { }

.col-span-1  { grid-column: span 1 / span 1;   }
.col-span-2  { grid-column: span 2 / span 2;   }
.col-span-3  { grid-column: span 3 / span 3;   }
.col-span-4  { grid-column: span 4 / span 4;   }
.col-span-5  { grid-column: span 5 / span 5;   }
.col-span-6  { grid-column: span 6 / span 6;   }
.col-span-7  { grid-column: span 7 / span 7;   }
.col-span-8  { grid-column: span 8 / span 8;   }
.col-span-9  { grid-column: span 9 / span 9;   }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }

.col-start-1  { grid-column-start: 1;  }
.col-start-2  { grid-column-start: 2;  }
.col-start-3  { grid-column-start: 3;  }
.col-start-4  { grid-column-start: 4;  }
.col-start-5  { grid-column-start: 5;  }
.col-start-6  { grid-column-start: 6;  }
.col-start-7  { grid-column-start: 7;  }
.col-start-8  { grid-column-start: 8;  }
.col-start-9  { grid-column-start: 9;  }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }
.col-start-13 { grid-column-start: 13; }

.col-end-1  { grid-column-end: 1;  }
.col-end-2  { grid-column-end: 2;  }
.col-end-3  { grid-column-end: 3;  }
.col-end-4  { grid-column-end: 4;  }
.col-end-5  { grid-column-end: 5;  }
.col-end-6  { grid-column-end: 6;  }
.col-end-7  { grid-column-end: 7;  }
.col-end-8  { grid-column-end: 8;  }
.col-end-9  { grid-column-end: 9;  }
.col-end-10 { grid-column-end: 10; }
.col-end-11 { grid-column-end: 11; }
.col-end-12 { grid-column-end: 12; }
.col-end-13 { grid-column-end: 13; }

.m-a { margin: auto; }
.ml-a { margin-left: auto; }
.mr-a { margin-right: auto; }
.m-05, .my-05, .mt-05 { margin-top: 0.5rem;    }
.m-1,  .my-1,  .mt-1  { margin-top: 1rem;      }
.m-2,  .my-2,  .mt-2  { margin-top: 2rem;      }
.m-4,  .my-4,  .mt-4  { margin-top: 4rem;      }
.m-6,  .my-6,  .mt-6  { margin-top: 6rem;      }
.m-8,  .my-8,  .mt-8  { margin-top: 8rem;      }
.m-12, .my-12, .mt-12 { margin-top: 12rem;     }

.m-05, .my-05, .mb-05 { margin-bottom: 0.5rem; }
.m-1,  .my-1,  .mb-1  { margin-bottom: 1rem;   }
.m-2,  .my-2,  .mb-2  { margin-bottom: 2rem;   }
.m-4,  .my-4,  .mb-4  { margin-bottom: 4rem;   }
.m-6,  .my-6,  .mb-6  { margin-bottom: 6rem;   }
.m-8,  .my-8,  .mb-8  { margin-bottom: 8rem;   }
.m-12, .my-12, .mb-12 { margin-bottom: 12rem;  }

.m-05, .mx-05, .mr-05 { margin-right: 0.5rem;  }
.m-1,  .mx-1,  .mr-1  { margin-right: 1rem;    }
.m-2,  .mx-2,  .mr-2  { margin-right: 2rem;    }
.m-4,  .mx-4,  .mr-4  { margin-right: 4rem;    }
.m-6,  .mx-6,  .mr-6  { margin-right: 6rem;    }
.m-8,  .mx-8,  .mr-8  { margin-right: 8rem;    }
.m-12, .mx-12, .mr-12 { margin-right: 12rem;   }

.m-05, .mx-05, .ml-05 { margin-left: 0.5rem;   }
.m-1,  .mx-1,  .ml-1  { margin-left: 1rem;     }
.m-2,  .mx-2,  .ml-2  { margin-left: 2rem;     }
.m-4,  .mx-4,  .ml-4  { margin-left: 4rem;     }
.m-6,  .mx-6,  .ml-6  { margin-left: 6rem;     }
.m-8,  .mx-8,  .ml-8  { margin-left: 8rem;     }
.m-12, .mx-12, .ml-12 { margin-left: 12rem;    }

.p-05, .py-05, .pt-05 { padding-top: 0.5rem;    }
.p-1,  .py-1,  .pt-1  { padding-top: 1rem;      }
.p-2,  .py-2,  .pt-2  { padding-top: 2rem;      }
.p-4,  .py-4,  .pt-4  { padding-top: 4rem;      }
.p-6,  .py-6,  .pt-6  { padding-top: 6rem;      }
.p-8,  .py-8,  .pt-8  { padding-top: 8rem;      }
.p-12, .py-12, .pt-12 { padding-top: 12rem;     }

.p-05, .py-05, .pb-05 { padding-bottom: 0.5rem; }
.p-1,  .py-1,  .pb-1  { padding-bottom: 1rem;   }
.p-2,  .py-2,  .pb-2  { padding-bottom: 2rem;   }
.p-4,  .py-4,  .pb-4  { padding-bottom: 4rem;   }
.p-6,  .py-6,  .pb-6  { padding-bottom: 6rem;   }
.p-8,  .py-8,  .pb-8  { padding-bottom: 8rem;   }
.p-12, .py-12, .pb-12 { padding-bottom: 12rem;  }

.p-05, .px-05, .pr-05 { padding-right: 0.5rem;  }
.p-1,  .px-1,  .pr-1  { padding-right: 1rem;    }
.p-2,  .px-2,  .pr-2  { padding-right: 2rem;    }
.p-4,  .px-4,  .pr-4  { padding-right: 4rem;    }
.p-6,  .px-6,  .pr-6  { padding-right: 6rem;    }
.p-8,  .px-8,  .pr-8  { padding-right: 8rem;    }
.p-12, .px-12, .pr-12 { padding-right: 12rem;   }

.p-05, .px-05, .pl-05 { padding-left: 0.5rem;   }
.p-1,  .px-1,  .pl-1  { padding-left: 1rem;     }
.p-2,  .px-2,  .pl-2  { padding-left: 2rem;     }
.p-4,  .px-4,  .pl-4  { padding-left: 4rem;     }
.p-6,  .px-6,  .pl-6  { padding-left: 6rem;     }
.p-8,  .px-8,  .pl-8  { padding-left: 8rem;     }
.p-12, .px-12, .pl-12 { padding-left: 12rem;    }

.m-block { display: none; }

@media (max-width: 850px) {
  .m-gap-6 { gap: 0; }

  .m-hidden { display: none; }
  .m-block { display: block; }

  [class*=col-span]  { grid-column: 1 / -1;  }
  [class*=col-start] { grid-column-start: 1; }
  [class*=col-end]   { grid-column-end: 1;   }

  .md-col-span-1  { grid-column: span 1 / span 1;   }
  .md-col-span-2  { grid-column: span 2 / span 2;   }
  .md-col-span-3  { grid-column: span 3 / span 3;   }
  .md-col-span-4  { grid-column: span 4 / span 4;   }
  .md-col-span-5  { grid-column: span 5 / span 5;   }
  .md-col-span-6  { grid-column: span 6 / span 6;   }
  .md-col-span-7  { grid-column: span 7 / span 7;   }
  .md-col-span-8  { grid-column: span 8 / span 8;   }
  .md-col-span-9  { grid-column: span 9 / span 9;   }
  .md-col-span-10 { grid-column: span 10 / span 10; }
  .md-col-span-11 { grid-column: span 11 / span 11; }
  .md-col-span-12 { grid-column: span 12 / span 12; }

  .md-order-1 { order: 1 }
  .md-order-2 { order: 2 }

  .m-p-05, .m-py-05, .m-pt-05 { padding-top: 0.5rem;    }
  .m-p-1,  .m-py-1,  .m-pt-1  { padding-top: 1rem;      }
  .m-p-2,  .m-py-2,  .m-pt-2  { padding-top: 2rem;      }
  .m-p-4,  .m-py-4,  .m-pt-4  { padding-top: 4rem;      }
  .m-p-6,  .m-py-6,  .m-pt-6  { padding-top: 6rem;      }
  .m-p-8,  .m-py-8,  .m-pt-8  { padding-top: 8rem;      }
  .m-p-12, .m-py-12, .m-pt-12 { padding-top: 12rem;     }

  .m-p-05, .m-py-05, .m-pb-05 { padding-bottom: 0.5rem; }
  .m-p-1,  .m-py-1,  .m-pb-1  { padding-bottom: 1rem;   }
  .m-p-2,  .m-py-2,  .m-pb-2  { padding-bottom: 2rem;   }
  .m-p-4,  .m-py-4,  .m-pb-4  { padding-bottom: 4rem;   }
  .m-p-6,  .m-py-6,  .m-pb-6  { padding-bottom: 6rem;   }
  .m-p-8,  .m-py-8,  .m-pb-8  { padding-bottom: 8rem;   }
  .m-p-12, .m-py-12, .m-pb-12 { padding-bottom: 12rem;  }

  .m-p-05, .m-px-05, .m-pr-05 { padding-right: 0.5rem;  }
  .m-p-1,  .m-px-1,  .m-pr-1  { padding-right: 1rem;    }
  .m-p-2,  .m-px-2,  .m-pr-2  { padding-right: 2rem;    }
  .m-p-4,  .m-px-4,  .m-pr-4  { padding-right: 4rem;    }
  .m-p-6,  .m-px-6,  .m-pr-6  { padding-right: 6rem;    }
  .m-p-8,  .m-px-8,  .m-pr-8  { padding-right: 8rem;    }
  .m-p-12, .m-px-12, .m-pr-12 { padding-right: 12rem;   }

  .m-p-05, .m-px-05, .m-pl-05 { padding-left: 0.5rem;   }
  .m-p-1,  .m-px-1,  .m-pl-1  { padding-left: 1rem;     }
  .m-p-2,  .m-px-2,  .m-pl-2  { padding-left: 2rem;     }
  .m-p-4,  .m-px-4,  .m-pl-4  { padding-left: 4rem;     }
  .m-p-6,  .m-px-6,  .m-pl-6  { padding-left: 6rem;     }
  .m-p-8,  .m-px-8,  .m-pl-8  { padding-left: 8rem;     }
  .m-p-12, .m-px-12, .m-pl-12 { padding-left: 12rem;    }
}