From 14f701b1dab9758918870a1099492fa9ff3f5dbb Mon Sep 17 00:00:00 2001
From: vince <vince@caboulot.org>
Date: Thu, 6 Jan 2022 22:07:06 +0100
Subject: [PATCH] ajoute un template et du style

---
 README.md     |    2 +-
 index.md      |    5 +
 style.css     | 5357 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 template.html |   20 +
 4 files changed, 5382 insertions(+), 2 deletions(-)
 create mode 100644 template.html

diff --git a/README.md b/README.md
index 716a851..f5dedfa 100644
--- a/README.md
+++ b/README.md
@@ -2,5 +2,5 @@ Projet git de la page d'accueil
 
 Pour générer :
 ```
-pandoc -f markdown index.md -o index.html -s -c style.css 
+pandoc --from markdown index.md --output index.html --standalone --template template.html
 ```
diff --git a/index.md b/index.md
index 571c01a..7b0dd07 100644
--- a/index.md
+++ b/index.md
@@ -1 +1,6 @@
+---
+title: CAGULL
+lang: fr
+---
+
 Bienvenue sur cagull.fr
diff --git a/style.css b/style.css
index cbcd34a..05b503d 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,5356 @@
-body{background:pink;}
+@charset "UTF-8";
+/*!
+* KNACSS Reborn: Just keep it simple!
+* @author: Alsacreations
+* v8.1 2022/01
+* Licence WTFPL http://www.wtfpl.net/
+*/
+/* ----------------------------- */
+/* ==Reset (base)                */
+/* ----------------------------- */
+/*
+ * 1. Switch to border-box model for all elements
+ * 2. Avoid min-width: auto on flex and grid items
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  /* 1 */
+  min-width: 0;
+  /* 2 */
+}
+
+/*
+ * 1. Remove the grey highlight on links in iOS 
+ * 2. Prevent orientation font changes in iOS
+ * 3. Breaks words to prevent overflow in all browsers
+ */
+html {
+  font-size: 100%;
+  -webkit-tap-highlight-color: transparent;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  overflow-wrap: break-word;
+  /* 3 */
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  background-color: #FFFFFF;
+  color: #212529;
+}
+
+/*
+ * Headings
+ */
+h1,
+.h1-like,
+h2,
+.h2-like,
+h3,
+.h3-like,
+h4,
+.h4-like,
+h5,
+.h5-like,
+h6,
+.h6-like {
+  color: #212529;
+}
+
+/*
+ * Links
+ */
+a {
+  color: #6c757d;
+  text-decoration: underline;
+}
+
+a:focus,
+a:hover,
+a:active {
+  color: #212529;
+  text-decoration: underline;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  /* 2 */
+}
+
+/*
+ * Vertical rythm
+ */
+h1,
+.h1-like,
+h2,
+.h2-like {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+p,
+address,
+ol,
+ul,
+dl,
+blockquote,
+pre,
+h3,
+.h3-like,
+h4,
+.h4-like,
+h5,
+.h5-like,
+h6,
+.h6-like,
+dt,
+dd {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+/*
+ * Nested elements
+ */
+ol ol,
+ol ul,
+ul ol,
+ul ul,
+li ul,
+li ol,
+nav ul,
+nav ol,
+li p,
+li .p-like {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/*
+ * Lists
+ */
+ul,
+ol {
+  padding-left: 1rem;
+}
+
+nav ul,
+nav ol {
+  list-style: none;
+  padding: 0;
+}
+
+/*
+ * Embed content
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+img,
+table,
+td,
+blockquote,
+pre,
+code,
+input,
+textarea,
+select,
+video,
+svg,
+iframe {
+  max-width: 100%;
+}
+
+iframe,
+img,
+input,
+select,
+textarea {
+  height: auto;
+}
+
+img {
+  border-style: none;
+}
+
+/**
+ * Remove the border on iframes in all browsers
+ */
+iframe {
+  border-style: none;
+}
+
+/*
+ * Fill color matching to text color
+ */
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+/*
+ * Hide the overflow in IE
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/*
+ * Tables
+ */
+table {
+  border-collapse: collapse;
+}
+
+/*
+ * Rulers
+ */
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  border-top: 1px solid;
+  margin: 1rem 0;
+  clear: both;
+  color: inherit;
+}
+
+/*
+ * table styles
+ */
+table {
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  vertical-align: top;
+  margin-bottom: 1rem;
+}
+
+/* 
+ * Hidden but not for an assistive technology like a screen reader, Yahoo! method 
+ */
+.visually-hidden,
+.sr-only {
+  position: absolute !important;
+  border: 0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+}
+
+/*
+ * Disable animations styles when reduced motion is enabled
+ */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/*
+ * Change the cursor on busy elements in all browsers.
+ */
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+/*
+ * Change the cursor on control elements in all browsers.
+ */
+[aria-controls] {
+  cursor: pointer;
+}
+
+/*
+ * Change the cursor on disabled, not-editable, or otherwise
+ * inoperable elements in all browsers.
+ */
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+/*
+ * Change the display on visually hidden accessible elements
+ * in all browsers.
+ */
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+/* ----------------------------- */
+/* ==Reset (forms)               */
+/* ----------------------------- */
+/*
+ * Remove the tapping delay on clickable elements in all browsers .
+ */
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  touch-action: manipulation;
+}
+
+/*
+ * 1. Change the inconsistent appearance in all browsers.
+ * 2. Add typography inheritance in all browsers.
+ */
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  background-color: transparent;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  font-family: inherit;
+  /* 2 */
+  font-size: inherit;
+  /* 2 */
+  line-height: inherit;
+  /* 2 */
+  letter-spacing: inherit;
+  /* 2 */
+  vertical-align: middle;
+}
+
+/*
+ * Basic User Interface reset
+ */
+button,
+input:not([type="radio"]):not([type="checkbox"]),
+select,
+textarea {
+  border: 0;
+}
+
+/*
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+pre {
+  -moz-tab-size: 2;
+       tab-size: 2;
+  white-space: pre-wrap;
+  line-height: normal;
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+/*
+ * Show overflow in IE/Edge
+ */
+button,
+input {
+  overflow: visible;
+}
+
+/* 
+ * Remove the inheritance of text transform in Firefox
+ */
+button,
+select {
+  text-transform: none;
+}
+
+/*
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+form,
+fieldset {
+  border: none;
+}
+
+fieldset {
+  margin: 0;
+  padding: 1rem;
+}
+
+legend {
+  display: table;
+  max-width: 100%;
+  padding: 0 0.125rem;
+  border: 0;
+  color: inherit;
+  white-space: normal;
+}
+
+label {
+  display: inline-block;
+  cursor: pointer;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical;
+  white-space: pre-wrap;
+}
+
+progress {
+  display: inline-block;
+  width: 100%;
+  vertical-align: baseline;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+/* ----------------------------- */
+/* Form oddities                 */
+/* ----------------------------- */
+/*
+ * 1. Correct the odd appearance in Chrome, Edge, and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+ * Correct the cursor style of increment and decrement buttons in Safari.
+ */
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/*
+ * Remove the inner padding in Chrome, Edge, and Safari on macOS.
+ */
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+ * 1. Correct the inability to style upload buttons in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+ * Remove the inner border and padding of focus outlines in Firefox.
+ */
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/*
+ * Restore the focus outline styles unset by the previous rule in Firefox.
+ */
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/*
+ * Remove the additional :invalid styles in Firefox.
+ */
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/* ----------------------------- */
+/* ==Print (quick print reset)   */
+/* ----------------------------- */
+@media print {
+  * {
+    background: transparent !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  body {
+    width: auto;
+    margin: auto;
+    font-family: serif;
+    font-size: 12pt;
+  }
+  p,
+  .p-like,
+  h1,
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  h4,
+  .h4-like,
+  h5,
+  .h5-like,
+  h6,
+  .h6-like,
+  blockquote,
+  label,
+  ul,
+  ol {
+    color: #000;
+    margin: auto;
+  }
+  .print {
+    display: block;
+  }
+  .no-print {
+    display: none;
+  }
+  /* no orphans, no widows */
+  p,
+  .p-like,
+  blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+  /* no breaks inside these elements */
+  blockquote,
+  ul,
+  ol {
+    page-break-inside: avoid;
+  }
+  /* page break before main headers
+  h1,
+  .h1-like {
+    page-break-before: always;
+  }
+  */
+  /* no breaks after these elements */
+  h1,
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  caption {
+    page-break-after: avoid;
+  }
+  a {
+    color: #000;
+  }
+  /* displaying URLs
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+  */
+  a[href^="javascript:"]::after,
+  a[href^="#"]::after {
+    content: "";
+  }
+}
+
+/* ----------------------------  */
+/* ==Layout classes              */
+/* ----------------------------- */
+/* Global container */
+.layout-maxed {
+  display: grid;
+}
+
+@media (min-width: 576px) {
+  .layout-maxed {
+    grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 576px) minmax(0.5rem, 1fr);
+  }
+}
+
+@media (min-width: 992px) {
+  .layout-maxed {
+    grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 992px) minmax(0.5rem, 1fr);
+  }
+}
+
+@media (min-width: 1400px) {
+  .layout-maxed {
+    grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 1400px) minmax(0.5rem, 1fr);
+  }
+}
+
+/* Center all children */
+.layout-maxed > * {
+  grid-column: 2;
+}
+
+/* Hero box  */
+.layout-hero {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: inherit;
+}
+
+.layout-hero > * {
+  grid-column: 2;
+}
+
+/* Hero image */
+.layout-hero-img {
+  grid-column: 1 / -1;
+  justify-self: center;
+  max-width: 100%;
+}
+
+/* 
+ * Global utility classes 
+ */
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}
+
+.inline {
+  display: inline;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-no-wrap {
+  flex-wrap: nowrap;
+}
+
+.flex-shrink {
+  flex-shrink: 1;
+}
+
+.flex-no-shrink {
+  flex-shrink: 0;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex-no-grow {
+  flex-grow: 0;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.float-none {
+  float: none;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-smaller {
+  font-size: smaller;
+}
+
+.text-bigger {
+  font-size: bigger;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-wrap {
+  overflow-wrap: break-word;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+.justify-items-start {
+  justify-items: start;
+}
+
+.justify-items-end {
+  justify-items: end;
+}
+
+.justify-items-center {
+  justify-items: center;
+}
+
+.align-start {
+  align-content: start;
+}
+
+.align-end {
+  align-content: end;
+}
+
+.align-center {
+  align-content: center;
+}
+
+.align-between {
+  align-content: space-between;
+}
+
+.align-around {
+  align-content: space-around;
+}
+
+.align-evenly {
+  align-content: space-evenly;
+}
+
+.align-items-start {
+  align-items: flex-start;
+}
+
+.align-items-end {
+  align-items: flex-end;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.place-center {
+  place-content: center;
+}
+
+.justify-self-auto {
+  justify-self: auto;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-stretch {
+  justify-self: stretch;
+}
+
+.align-self-auto {
+  align-self: auto;
+}
+
+.align-self-start {
+  align-self: flex-start;
+}
+
+.align-self-end {
+  align-self: flex-end;
+}
+
+.align-self-center {
+  align-self: center;
+}
+
+.align-self-stretch {
+  align-self: stretch;
+}
+
+.align-top {
+  vertical-align: top;
+}
+
+.align-bottom {
+  vertical-align: bottom;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.item-first {
+  order: -100;
+}
+
+.item-last {
+  order: 100;
+}
+
+@media (min-width: 576px) {
+  .sm\:hidden {
+    display: none;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:hidden {
+    display: none;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:hidden {
+    display: none;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:block {
+    display: block;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:block {
+    display: block;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:block {
+    display: block;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:inline {
+    display: inline;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:inline {
+    display: inline;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:inline {
+    display: inline;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:inline-block {
+    display: inline-block;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:inline-block {
+    display: inline-block;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:inline-block {
+    display: inline-block;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:flex {
+    display: flex;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:flex {
+    display: flex;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:flex {
+    display: flex;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:flex-row {
+    flex-direction: row;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:flex-col {
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:flex-col {
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:flex-col {
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:flex-wrap {
+    flex-wrap: wrap;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:flex-wrap {
+    flex-wrap: wrap;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:flex-wrap {
+    flex-wrap: wrap;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:flex-no-wrap {
+    flex-wrap: nowrap;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:flex-no-wrap {
+    flex-wrap: nowrap;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:flex-no-wrap {
+    flex-wrap: nowrap;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:flex-shrink {
+    flex-shrink: 1;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:flex-shrink {
+    flex-shrink: 1;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:flex-shrink {
+    flex-shrink: 1;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:flex-no-shrink {
+    flex-shrink: 0;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:flex-no-shrink {
+    flex-shrink: 0;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:flex-no-shrink {
+    flex-shrink: 0;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:flex-grow {
+    flex-grow: 1;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:flex-grow {
+    flex-grow: 1;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:flex-grow {
+    flex-grow: 1;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:flex-no-grow {
+    flex-grow: 0;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:flex-no-grow {
+    flex-grow: 0;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:flex-no-grow {
+    flex-grow: 0;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:float-left {
+    float: left;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:float-left {
+    float: left;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:float-left {
+    float: left;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:float-right {
+    float: right;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:float-right {
+    float: right;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:float-right {
+    float: right;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:float-none {
+    float: none;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:float-none {
+    float: none;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:float-none {
+    float: none;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-bold {
+    font-weight: bold;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-bold {
+    font-weight: bold;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-bold {
+    font-weight: bold;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-italic {
+    font-style: italic;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-italic {
+    font-style: italic;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-italic {
+    font-style: italic;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-uppercase {
+    text-transform: uppercase;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-uppercase {
+    text-transform: uppercase;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-uppercase {
+    text-transform: uppercase;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-lowercase {
+    text-transform: lowercase;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-lowercase {
+    text-transform: lowercase;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-lowercase {
+    text-transform: lowercase;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-smaller {
+    font-size: smaller;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-smaller {
+    font-size: smaller;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-smaller {
+    font-size: smaller;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-bigger {
+    font-size: bigger;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-bigger {
+    font-size: bigger;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-bigger {
+    font-size: bigger;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-left {
+    text-align: left;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-left {
+    text-align: left;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-left {
+    text-align: left;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-right {
+    text-align: right;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-right {
+    text-align: right;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-right {
+    text-align: right;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-justify {
+    text-align: justify;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-justify {
+    text-align: justify;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-justify {
+    text-align: justify;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-wrap {
+    overflow-wrap: break-word;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-wrap {
+    overflow-wrap: break-word;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-wrap {
+    overflow-wrap: break-word;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-start {
+    justify-content: flex-start;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-start {
+    justify-content: flex-start;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-start {
+    justify-content: flex-start;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-end {
+    justify-content: flex-end;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-end {
+    justify-content: flex-end;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-end {
+    justify-content: flex-end;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-center {
+    justify-content: center;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-center {
+    justify-content: center;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-center {
+    justify-content: center;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-between {
+    justify-content: space-between;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-between {
+    justify-content: space-between;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-around {
+    justify-content: space-around;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-around {
+    justify-content: space-around;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-around {
+    justify-content: space-around;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-evenly {
+    justify-content: space-evenly;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-evenly {
+    justify-content: space-evenly;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-evenly {
+    justify-content: space-evenly;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-items-start {
+    justify-items: start;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-items-start {
+    justify-items: start;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-items-start {
+    justify-items: start;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-items-end {
+    justify-items: end;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-items-end {
+    justify-items: end;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-items-end {
+    justify-items: end;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-items-center {
+    justify-items: center;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-items-center {
+    justify-items: center;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-items-center {
+    justify-items: center;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-start {
+    align-content: start;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-start {
+    align-content: start;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-start {
+    align-content: start;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-end {
+    align-content: end;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-end {
+    align-content: end;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-end {
+    align-content: end;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-center {
+    align-content: center;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-center {
+    align-content: center;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-center {
+    align-content: center;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-between {
+    align-content: space-between;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-between {
+    align-content: space-between;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-between {
+    align-content: space-between;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-around {
+    align-content: space-around;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-around {
+    align-content: space-around;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-around {
+    align-content: space-around;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-evenly {
+    align-content: space-evenly;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-evenly {
+    align-content: space-evenly;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-evenly {
+    align-content: space-evenly;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-items-start {
+    align-items: flex-start;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-items-start {
+    align-items: flex-start;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-items-start {
+    align-items: flex-start;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-items-end {
+    align-items: flex-end;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-items-end {
+    align-items: flex-end;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-items-end {
+    align-items: flex-end;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-items-center {
+    align-items: center;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-items-center {
+    align-items: center;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-items-center {
+    align-items: center;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:place-center {
+    place-content: center;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:place-center {
+    place-content: center;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:place-center {
+    place-content: center;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-self-auto {
+    justify-self: auto;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-self-auto {
+    justify-self: auto;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-self-auto {
+    justify-self: auto;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-self-start {
+    justify-self: start;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-self-start {
+    justify-self: start;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-self-start {
+    justify-self: start;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-self-end {
+    justify-self: end;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-self-end {
+    justify-self: end;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-self-end {
+    justify-self: end;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-self-center {
+    justify-self: center;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-self-center {
+    justify-self: center;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-self-center {
+    justify-self: center;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:justify-self-stretch {
+    justify-self: stretch;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:justify-self-stretch {
+    justify-self: stretch;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:justify-self-stretch {
+    justify-self: stretch;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-self-auto {
+    align-self: auto;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-self-auto {
+    align-self: auto;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-self-auto {
+    align-self: auto;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-self-start {
+    align-self: flex-start;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-self-start {
+    align-self: flex-start;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-self-start {
+    align-self: flex-start;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-self-end {
+    align-self: flex-end;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-self-end {
+    align-self: flex-end;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-self-end {
+    align-self: flex-end;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-self-center {
+    align-self: center;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-self-center {
+    align-self: center;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-self-center {
+    align-self: center;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-self-stretch {
+    align-self: stretch;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-self-stretch {
+    align-self: stretch;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-self-stretch {
+    align-self: stretch;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-top {
+    vertical-align: top;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-top {
+    vertical-align: top;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-top {
+    vertical-align: top;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-bottom {
+    vertical-align: bottom;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-bottom {
+    vertical-align: bottom;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-bottom {
+    vertical-align: bottom;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:align-middle {
+    vertical-align: middle;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:align-middle {
+    vertical-align: middle;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:align-middle {
+    vertical-align: middle;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:item-first {
+    order: -100;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:item-first {
+    order: -100;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:item-first {
+    order: -100;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:item-last {
+    order: 100;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:item-last {
+    order: 100;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:item-last {
+    order: 100;
+  }
+}
+
+.is-unstyled {
+  list-style: none;
+  padding-left: 0;
+}
+
+.is-disabled,
+[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed !important;
+  filter: grayscale(1);
+}
+
+.text-normal {
+  font-weight: normal;
+  font-style: normal;
+  text-transform: none;
+}
+
+@media (min-width: 576px) {
+  .sm\:visually-hidden {
+    position: absolute !important;
+    border: 0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+  }
+  .sm\:is-unstyled {
+    list-style: none;
+    padding-left: 0;
+  }
+  .sm\:is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed !important;
+    filter: grayscale(1);
+  }
+  .sm\:text-normal {
+    font-weight: normal;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:visually-hidden {
+    position: absolute !important;
+    border: 0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+  }
+  .md\:is-unstyled {
+    list-style: none;
+    padding-left: 0;
+  }
+  .md\:is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed !important;
+    filter: grayscale(1);
+  }
+  .md\:text-normal {
+    font-weight: normal;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:visually-hidden {
+    position: absolute !important;
+    border: 0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+  }
+  .lg\:is-unstyled {
+    list-style: none;
+    padding-left: 0;
+  }
+  .lg\:is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed !important;
+    filter: grayscale(1);
+  }
+  .lg\:text-normal {
+    font-weight: normal;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+/* Font sizes utility classes */
+.text-10 {
+  font-size: 0.625rem;
+}
+
+.text-11 {
+  font-size: 0.6875rem;
+}
+
+.text-12 {
+  font-size: 0.75rem;
+}
+
+.text-14 {
+  font-size: 0.875rem;
+}
+
+.text-16 {
+  font-size: 1rem;
+}
+
+.text-18 {
+  font-size: 1.125rem;
+}
+
+.text-20 {
+  font-size: 1.25rem;
+}
+
+.text-24 {
+  font-size: 1.5rem;
+}
+
+.text-30 {
+  font-size: 1.875rem;
+}
+
+.text-36 {
+  font-size: 2.25rem;
+}
+
+.text-base {
+  font-size: 1rem;
+}
+
+.text-inherit {
+  font-size: inherit;
+}
+
+@media (min-width: 576px) {
+  .sm\:text-10 {
+    font-size: 0.625rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-10 {
+    font-size: 0.625rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-10 {
+    font-size: 0.625rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-11 {
+    font-size: 0.6875rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-11 {
+    font-size: 0.6875rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-11 {
+    font-size: 0.6875rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-12 {
+    font-size: 0.75rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-12 {
+    font-size: 0.75rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-12 {
+    font-size: 0.75rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-14 {
+    font-size: 0.875rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-14 {
+    font-size: 0.875rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-14 {
+    font-size: 0.875rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-16 {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-16 {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-16 {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-18 {
+    font-size: 1.125rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-18 {
+    font-size: 1.125rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-18 {
+    font-size: 1.125rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-20 {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-20 {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-20 {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-24 {
+    font-size: 1.5rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-24 {
+    font-size: 1.5rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-24 {
+    font-size: 1.5rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-30 {
+    font-size: 1.875rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-30 {
+    font-size: 1.875rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-30 {
+    font-size: 1.875rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-36 {
+    font-size: 2.25rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-36 {
+    font-size: 2.25rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-36 {
+    font-size: 2.25rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-base {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-base {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-base {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-inherit {
+    font-size: inherit;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:text-inherit {
+    font-size: inherit;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:text-inherit {
+    font-size: inherit;
+  }
+}
+
+/* Spacers utility classes */
+.p-0 {
+  padding: 0;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.pr-0 {
+  padding-right: 0;
+}
+
+.pb-0 {
+  padding-bottom: 0;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.m-0 {
+  margin: 0;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mr-0 {
+  margin-right: 0;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.ml-0 {
+  margin-left: 0;
+}
+
+.mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@media (min-width: 576px) {
+  .sm\:p-0 {
+    padding: 0;
+  }
+  .sm\:pt-0 {
+    padding-top: 0;
+  }
+  .sm\:pr-0 {
+    padding-right: 0;
+  }
+  .sm\:pb-0 {
+    padding-bottom: 0;
+  }
+  .sm\:pl-0 {
+    padding-left: 0;
+  }
+  .sm\:px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .sm\:py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .sm\:m-0 {
+    margin: 0;
+  }
+  .sm\:mt-0 {
+    margin-top: 0;
+  }
+  .sm\:mr-0 {
+    margin-right: 0;
+  }
+  .sm\:mb-0 {
+    margin-bottom: 0;
+  }
+  .sm\:ml-0 {
+    margin-left: 0;
+  }
+  .sm\:mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .sm\:my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:p-0 {
+    padding: 0;
+  }
+  .md\:pt-0 {
+    padding-top: 0;
+  }
+  .md\:pr-0 {
+    padding-right: 0;
+  }
+  .md\:pb-0 {
+    padding-bottom: 0;
+  }
+  .md\:pl-0 {
+    padding-left: 0;
+  }
+  .md\:px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .md\:py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .md\:m-0 {
+    margin: 0;
+  }
+  .md\:mt-0 {
+    margin-top: 0;
+  }
+  .md\:mr-0 {
+    margin-right: 0;
+  }
+  .md\:mb-0 {
+    margin-bottom: 0;
+  }
+  .md\:ml-0 {
+    margin-left: 0;
+  }
+  .md\:mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .md\:my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:p-0 {
+    padding: 0;
+  }
+  .lg\:pt-0 {
+    padding-top: 0;
+  }
+  .lg\:pr-0 {
+    padding-right: 0;
+  }
+  .lg\:pb-0 {
+    padding-bottom: 0;
+  }
+  .lg\:pl-0 {
+    padding-left: 0;
+  }
+  .lg\:px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .lg\:py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .lg\:m-0 {
+    margin: 0;
+  }
+  .lg\:mt-0 {
+    margin-top: 0;
+  }
+  .lg\:mr-0 {
+    margin-right: 0;
+  }
+  .lg\:mb-0 {
+    margin-bottom: 0;
+  }
+  .lg\:ml-0 {
+    margin-left: 0;
+  }
+  .lg\:mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .lg\:my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.p-2 {
+  padding: 0.125rem;
+}
+
+.pt-2 {
+  padding-top: 0.125rem;
+}
+
+.pr-2 {
+  padding-right: 0.125rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.125rem;
+}
+
+.pl-2 {
+  padding-left: 0.125rem;
+}
+
+.px-2 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+}
+
+.py-2 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.m-2 {
+  margin: 0.125rem;
+}
+
+.mt-2 {
+  margin-top: 0.125rem;
+}
+
+.mr-2 {
+  margin-right: 0.125rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.125rem;
+}
+
+.ml-2 {
+  margin-left: 0.125rem;
+}
+
+.mx-2 {
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
+}
+
+.my-2 {
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
+}
+
+@media (min-width: 576px) {
+  .sm\:p-2 {
+    padding: 0.125rem;
+  }
+  .sm\:pt-2 {
+    padding-top: 0.125rem;
+  }
+  .sm\:pr-2 {
+    padding-right: 0.125rem;
+  }
+  .sm\:pb-2 {
+    padding-bottom: 0.125rem;
+  }
+  .sm\:pl-2 {
+    padding-left: 0.125rem;
+  }
+  .sm\:px-2 {
+    padding-left: 0.125rem;
+    padding-right: 0.125rem;
+  }
+  .sm\:py-2 {
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+  .sm\:m-2 {
+    margin: 0.125rem;
+  }
+  .sm\:mt-2 {
+    margin-top: 0.125rem;
+  }
+  .sm\:mr-2 {
+    margin-right: 0.125rem;
+  }
+  .sm\:mb-2 {
+    margin-bottom: 0.125rem;
+  }
+  .sm\:ml-2 {
+    margin-left: 0.125rem;
+  }
+  .sm\:mx-2 {
+    margin-left: 0.125rem;
+    margin-right: 0.125rem;
+  }
+  .sm\:my-2 {
+    margin-top: 0.125rem;
+    margin-bottom: 0.125rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:p-2 {
+    padding: 0.125rem;
+  }
+  .md\:pt-2 {
+    padding-top: 0.125rem;
+  }
+  .md\:pr-2 {
+    padding-right: 0.125rem;
+  }
+  .md\:pb-2 {
+    padding-bottom: 0.125rem;
+  }
+  .md\:pl-2 {
+    padding-left: 0.125rem;
+  }
+  .md\:px-2 {
+    padding-left: 0.125rem;
+    padding-right: 0.125rem;
+  }
+  .md\:py-2 {
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+  .md\:m-2 {
+    margin: 0.125rem;
+  }
+  .md\:mt-2 {
+    margin-top: 0.125rem;
+  }
+  .md\:mr-2 {
+    margin-right: 0.125rem;
+  }
+  .md\:mb-2 {
+    margin-bottom: 0.125rem;
+  }
+  .md\:ml-2 {
+    margin-left: 0.125rem;
+  }
+  .md\:mx-2 {
+    margin-left: 0.125rem;
+    margin-right: 0.125rem;
+  }
+  .md\:my-2 {
+    margin-top: 0.125rem;
+    margin-bottom: 0.125rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:p-2 {
+    padding: 0.125rem;
+  }
+  .lg\:pt-2 {
+    padding-top: 0.125rem;
+  }
+  .lg\:pr-2 {
+    padding-right: 0.125rem;
+  }
+  .lg\:pb-2 {
+    padding-bottom: 0.125rem;
+  }
+  .lg\:pl-2 {
+    padding-left: 0.125rem;
+  }
+  .lg\:px-2 {
+    padding-left: 0.125rem;
+    padding-right: 0.125rem;
+  }
+  .lg\:py-2 {
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+  .lg\:m-2 {
+    margin: 0.125rem;
+  }
+  .lg\:mt-2 {
+    margin-top: 0.125rem;
+  }
+  .lg\:mr-2 {
+    margin-right: 0.125rem;
+  }
+  .lg\:mb-2 {
+    margin-bottom: 0.125rem;
+  }
+  .lg\:ml-2 {
+    margin-left: 0.125rem;
+  }
+  .lg\:mx-2 {
+    margin-left: 0.125rem;
+    margin-right: 0.125rem;
+  }
+  .lg\:my-2 {
+    margin-top: 0.125rem;
+    margin-bottom: 0.125rem;
+  }
+}
+
+.p-5 {
+  padding: 0.313rem;
+}
+
+.pt-5 {
+  padding-top: 0.313rem;
+}
+
+.pr-5 {
+  padding-right: 0.313rem;
+}
+
+.pb-5 {
+  padding-bottom: 0.313rem;
+}
+
+.pl-5 {
+  padding-left: 0.313rem;
+}
+
+.px-5 {
+  padding-left: 0.313rem;
+  padding-right: 0.313rem;
+}
+
+.py-5 {
+  padding-top: 0.313rem;
+  padding-bottom: 0.313rem;
+}
+
+.m-5 {
+  margin: 0.313rem;
+}
+
+.mt-5 {
+  margin-top: 0.313rem;
+}
+
+.mr-5 {
+  margin-right: 0.313rem;
+}
+
+.mb-5 {
+  margin-bottom: 0.313rem;
+}
+
+.ml-5 {
+  margin-left: 0.313rem;
+}
+
+.mx-5 {
+  margin-left: 0.313rem;
+  margin-right: 0.313rem;
+}
+
+.my-5 {
+  margin-top: 0.313rem;
+  margin-bottom: 0.313rem;
+}
+
+@media (min-width: 576px) {
+  .sm\:p-5 {
+    padding: 0.313rem;
+  }
+  .sm\:pt-5 {
+    padding-top: 0.313rem;
+  }
+  .sm\:pr-5 {
+    padding-right: 0.313rem;
+  }
+  .sm\:pb-5 {
+    padding-bottom: 0.313rem;
+  }
+  .sm\:pl-5 {
+    padding-left: 0.313rem;
+  }
+  .sm\:px-5 {
+    padding-left: 0.313rem;
+    padding-right: 0.313rem;
+  }
+  .sm\:py-5 {
+    padding-top: 0.313rem;
+    padding-bottom: 0.313rem;
+  }
+  .sm\:m-5 {
+    margin: 0.313rem;
+  }
+  .sm\:mt-5 {
+    margin-top: 0.313rem;
+  }
+  .sm\:mr-5 {
+    margin-right: 0.313rem;
+  }
+  .sm\:mb-5 {
+    margin-bottom: 0.313rem;
+  }
+  .sm\:ml-5 {
+    margin-left: 0.313rem;
+  }
+  .sm\:mx-5 {
+    margin-left: 0.313rem;
+    margin-right: 0.313rem;
+  }
+  .sm\:my-5 {
+    margin-top: 0.313rem;
+    margin-bottom: 0.313rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:p-5 {
+    padding: 0.313rem;
+  }
+  .md\:pt-5 {
+    padding-top: 0.313rem;
+  }
+  .md\:pr-5 {
+    padding-right: 0.313rem;
+  }
+  .md\:pb-5 {
+    padding-bottom: 0.313rem;
+  }
+  .md\:pl-5 {
+    padding-left: 0.313rem;
+  }
+  .md\:px-5 {
+    padding-left: 0.313rem;
+    padding-right: 0.313rem;
+  }
+  .md\:py-5 {
+    padding-top: 0.313rem;
+    padding-bottom: 0.313rem;
+  }
+  .md\:m-5 {
+    margin: 0.313rem;
+  }
+  .md\:mt-5 {
+    margin-top: 0.313rem;
+  }
+  .md\:mr-5 {
+    margin-right: 0.313rem;
+  }
+  .md\:mb-5 {
+    margin-bottom: 0.313rem;
+  }
+  .md\:ml-5 {
+    margin-left: 0.313rem;
+  }
+  .md\:mx-5 {
+    margin-left: 0.313rem;
+    margin-right: 0.313rem;
+  }
+  .md\:my-5 {
+    margin-top: 0.313rem;
+    margin-bottom: 0.313rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:p-5 {
+    padding: 0.313rem;
+  }
+  .lg\:pt-5 {
+    padding-top: 0.313rem;
+  }
+  .lg\:pr-5 {
+    padding-right: 0.313rem;
+  }
+  .lg\:pb-5 {
+    padding-bottom: 0.313rem;
+  }
+  .lg\:pl-5 {
+    padding-left: 0.313rem;
+  }
+  .lg\:px-5 {
+    padding-left: 0.313rem;
+    padding-right: 0.313rem;
+  }
+  .lg\:py-5 {
+    padding-top: 0.313rem;
+    padding-bottom: 0.313rem;
+  }
+  .lg\:m-5 {
+    margin: 0.313rem;
+  }
+  .lg\:mt-5 {
+    margin-top: 0.313rem;
+  }
+  .lg\:mr-5 {
+    margin-right: 0.313rem;
+  }
+  .lg\:mb-5 {
+    margin-bottom: 0.313rem;
+  }
+  .lg\:ml-5 {
+    margin-left: 0.313rem;
+  }
+  .lg\:mx-5 {
+    margin-left: 0.313rem;
+    margin-right: 0.313rem;
+  }
+  .lg\:my-5 {
+    margin-top: 0.313rem;
+    margin-bottom: 0.313rem;
+  }
+}
+
+.p-8 {
+  padding: 0.5rem;
+}
+
+.pt-8 {
+  padding-top: 0.5rem;
+}
+
+.pr-8 {
+  padding-right: 0.5rem;
+}
+
+.pb-8 {
+  padding-bottom: 0.5rem;
+}
+
+.pl-8 {
+  padding-left: 0.5rem;
+}
+
+.px-8 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.py-8 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.m-8 {
+  margin: 0.5rem;
+}
+
+.mt-8 {
+  margin-top: 0.5rem;
+}
+
+.mr-8 {
+  margin-right: 0.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 0.5rem;
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.mx-8 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.my-8 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+@media (min-width: 576px) {
+  .sm\:p-8 {
+    padding: 0.5rem;
+  }
+  .sm\:pt-8 {
+    padding-top: 0.5rem;
+  }
+  .sm\:pr-8 {
+    padding-right: 0.5rem;
+  }
+  .sm\:pb-8 {
+    padding-bottom: 0.5rem;
+  }
+  .sm\:pl-8 {
+    padding-left: 0.5rem;
+  }
+  .sm\:px-8 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  .sm\:py-8 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .sm\:m-8 {
+    margin: 0.5rem;
+  }
+  .sm\:mt-8 {
+    margin-top: 0.5rem;
+  }
+  .sm\:mr-8 {
+    margin-right: 0.5rem;
+  }
+  .sm\:mb-8 {
+    margin-bottom: 0.5rem;
+  }
+  .sm\:ml-8 {
+    margin-left: 0.5rem;
+  }
+  .sm\:mx-8 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .sm\:my-8 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:p-8 {
+    padding: 0.5rem;
+  }
+  .md\:pt-8 {
+    padding-top: 0.5rem;
+  }
+  .md\:pr-8 {
+    padding-right: 0.5rem;
+  }
+  .md\:pb-8 {
+    padding-bottom: 0.5rem;
+  }
+  .md\:pl-8 {
+    padding-left: 0.5rem;
+  }
+  .md\:px-8 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  .md\:py-8 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .md\:m-8 {
+    margin: 0.5rem;
+  }
+  .md\:mt-8 {
+    margin-top: 0.5rem;
+  }
+  .md\:mr-8 {
+    margin-right: 0.5rem;
+  }
+  .md\:mb-8 {
+    margin-bottom: 0.5rem;
+  }
+  .md\:ml-8 {
+    margin-left: 0.5rem;
+  }
+  .md\:mx-8 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .md\:my-8 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:p-8 {
+    padding: 0.5rem;
+  }
+  .lg\:pt-8 {
+    padding-top: 0.5rem;
+  }
+  .lg\:pr-8 {
+    padding-right: 0.5rem;
+  }
+  .lg\:pb-8 {
+    padding-bottom: 0.5rem;
+  }
+  .lg\:pl-8 {
+    padding-left: 0.5rem;
+  }
+  .lg\:px-8 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  .lg\:py-8 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .lg\:m-8 {
+    margin: 0.5rem;
+  }
+  .lg\:mt-8 {
+    margin-top: 0.5rem;
+  }
+  .lg\:mr-8 {
+    margin-right: 0.5rem;
+  }
+  .lg\:mb-8 {
+    margin-bottom: 0.5rem;
+  }
+  .lg\:ml-8 {
+    margin-left: 0.5rem;
+  }
+  .lg\:mx-8 {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .lg\:my-8 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
+.p-10 {
+  padding: 0.625rem;
+}
+
+.pt-10 {
+  padding-top: 0.625rem;
+}
+
+.pr-10 {
+  padding-right: 0.625rem;
+}
+
+.pb-10 {
+  padding-bottom: 0.625rem;
+}
+
+.pl-10 {
+  padding-left: 0.625rem;
+}
+
+.px-10 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.py-10 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.m-10 {
+  margin: 0.625rem;
+}
+
+.mt-10 {
+  margin-top: 0.625rem;
+}
+
+.mr-10 {
+  margin-right: 0.625rem;
+}
+
+.mb-10 {
+  margin-bottom: 0.625rem;
+}
+
+.ml-10 {
+  margin-left: 0.625rem;
+}
+
+.mx-10 {
+  margin-left: 0.625rem;
+  margin-right: 0.625rem;
+}
+
+.my-10 {
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
+@media (min-width: 576px) {
+  .sm\:p-10 {
+    padding: 0.625rem;
+  }
+  .sm\:pt-10 {
+    padding-top: 0.625rem;
+  }
+  .sm\:pr-10 {
+    padding-right: 0.625rem;
+  }
+  .sm\:pb-10 {
+    padding-bottom: 0.625rem;
+  }
+  .sm\:pl-10 {
+    padding-left: 0.625rem;
+  }
+  .sm\:px-10 {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+  }
+  .sm\:py-10 {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+  .sm\:m-10 {
+    margin: 0.625rem;
+  }
+  .sm\:mt-10 {
+    margin-top: 0.625rem;
+  }
+  .sm\:mr-10 {
+    margin-right: 0.625rem;
+  }
+  .sm\:mb-10 {
+    margin-bottom: 0.625rem;
+  }
+  .sm\:ml-10 {
+    margin-left: 0.625rem;
+  }
+  .sm\:mx-10 {
+    margin-left: 0.625rem;
+    margin-right: 0.625rem;
+  }
+  .sm\:my-10 {
+    margin-top: 0.625rem;
+    margin-bottom: 0.625rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:p-10 {
+    padding: 0.625rem;
+  }
+  .md\:pt-10 {
+    padding-top: 0.625rem;
+  }
+  .md\:pr-10 {
+    padding-right: 0.625rem;
+  }
+  .md\:pb-10 {
+    padding-bottom: 0.625rem;
+  }
+  .md\:pl-10 {
+    padding-left: 0.625rem;
+  }
+  .md\:px-10 {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+  }
+  .md\:py-10 {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+  .md\:m-10 {
+    margin: 0.625rem;
+  }
+  .md\:mt-10 {
+    margin-top: 0.625rem;
+  }
+  .md\:mr-10 {
+    margin-right: 0.625rem;
+  }
+  .md\:mb-10 {
+    margin-bottom: 0.625rem;
+  }
+  .md\:ml-10 {
+    margin-left: 0.625rem;
+  }
+  .md\:mx-10 {
+    margin-left: 0.625rem;
+    margin-right: 0.625rem;
+  }
+  .md\:my-10 {
+    margin-top: 0.625rem;
+    margin-bottom: 0.625rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:p-10 {
+    padding: 0.625rem;
+  }
+  .lg\:pt-10 {
+    padding-top: 0.625rem;
+  }
+  .lg\:pr-10 {
+    padding-right: 0.625rem;
+  }
+  .lg\:pb-10 {
+    padding-bottom: 0.625rem;
+  }
+  .lg\:pl-10 {
+    padding-left: 0.625rem;
+  }
+  .lg\:px-10 {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+  }
+  .lg\:py-10 {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+  .lg\:m-10 {
+    margin: 0.625rem;
+  }
+  .lg\:mt-10 {
+    margin-top: 0.625rem;
+  }
+  .lg\:mr-10 {
+    margin-right: 0.625rem;
+  }
+  .lg\:mb-10 {
+    margin-bottom: 0.625rem;
+  }
+  .lg\:ml-10 {
+    margin-left: 0.625rem;
+  }
+  .lg\:mx-10 {
+    margin-left: 0.625rem;
+    margin-right: 0.625rem;
+  }
+  .lg\:my-10 {
+    margin-top: 0.625rem;
+    margin-bottom: 0.625rem;
+  }
+}
+
+.p-16 {
+  padding: 1rem;
+}
+
+.pt-16 {
+  padding-top: 1rem;
+}
+
+.pr-16 {
+  padding-right: 1rem;
+}
+
+.pb-16 {
+  padding-bottom: 1rem;
+}
+
+.pl-16 {
+  padding-left: 1rem;
+}
+
+.px-16 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-16 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.m-16 {
+  margin: 1rem;
+}
+
+.mt-16 {
+  margin-top: 1rem;
+}
+
+.mr-16 {
+  margin-right: 1rem;
+}
+
+.mb-16 {
+  margin-bottom: 1rem;
+}
+
+.ml-16 {
+  margin-left: 1rem;
+}
+
+.mx-16 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.my-16 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 576px) {
+  .sm\:p-16 {
+    padding: 1rem;
+  }
+  .sm\:pt-16 {
+    padding-top: 1rem;
+  }
+  .sm\:pr-16 {
+    padding-right: 1rem;
+  }
+  .sm\:pb-16 {
+    padding-bottom: 1rem;
+  }
+  .sm\:pl-16 {
+    padding-left: 1rem;
+  }
+  .sm\:px-16 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .sm\:py-16 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+  .sm\:m-16 {
+    margin: 1rem;
+  }
+  .sm\:mt-16 {
+    margin-top: 1rem;
+  }
+  .sm\:mr-16 {
+    margin-right: 1rem;
+  }
+  .sm\:mb-16 {
+    margin-bottom: 1rem;
+  }
+  .sm\:ml-16 {
+    margin-left: 1rem;
+  }
+  .sm\:mx-16 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+  .sm\:my-16 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:p-16 {
+    padding: 1rem;
+  }
+  .md\:pt-16 {
+    padding-top: 1rem;
+  }
+  .md\:pr-16 {
+    padding-right: 1rem;
+  }
+  .md\:pb-16 {
+    padding-bottom: 1rem;
+  }
+  .md\:pl-16 {
+    padding-left: 1rem;
+  }
+  .md\:px-16 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .md\:py-16 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+  .md\:m-16 {
+    margin: 1rem;
+  }
+  .md\:mt-16 {
+    margin-top: 1rem;
+  }
+  .md\:mr-16 {
+    margin-right: 1rem;
+  }
+  .md\:mb-16 {
+    margin-bottom: 1rem;
+  }
+  .md\:ml-16 {
+    margin-left: 1rem;
+  }
+  .md\:mx-16 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+  .md\:my-16 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:p-16 {
+    padding: 1rem;
+  }
+  .lg\:pt-16 {
+    padding-top: 1rem;
+  }
+  .lg\:pr-16 {
+    padding-right: 1rem;
+  }
+  .lg\:pb-16 {
+    padding-bottom: 1rem;
+  }
+  .lg\:pl-16 {
+    padding-left: 1rem;
+  }
+  .lg\:px-16 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .lg\:py-16 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+  .lg\:m-16 {
+    margin: 1rem;
+  }
+  .lg\:mt-16 {
+    margin-top: 1rem;
+  }
+  .lg\:mr-16 {
+    margin-right: 1rem;
+  }
+  .lg\:mb-16 {
+    margin-bottom: 1rem;
+  }
+  .lg\:ml-16 {
+    margin-left: 1rem;
+  }
+  .lg\:mx-16 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+  .lg\:my-16 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+}
+
+.p-20 {
+  padding: 1.25rem;
+}
+
+.pt-20 {
+  padding-top: 1.25rem;
+}
+
+.pr-20 {
+  padding-right: 1.25rem;
+}
+
+.pb-20 {
+  padding-bottom: 1.25rem;
+}
+
+.pl-20 {
+  padding-left: 1.25rem;
+}
+
+.px-20 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-20 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.m-20 {
+  margin: 1.25rem;
+}
+
+.mt-20 {
+  margin-top: 1.25rem;
+}
+
+.mr-20 {
+  margin-right: 1.25rem;
+}
+
+.mb-20 {
+  margin-bottom: 1.25rem;
+}
+
+.ml-20 {
+  margin-left: 1.25rem;
+}
+
+.mx-20 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
+.my-20 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+@media (min-width: 576px) {
+  .sm\:p-20 {
+    padding: 1.25rem;
+  }
+  .sm\:pt-20 {
+    padding-top: 1.25rem;
+  }
+  .sm\:pr-20 {
+    padding-right: 1.25rem;
+  }
+  .sm\:pb-20 {
+    padding-bottom: 1.25rem;
+  }
+  .sm\:pl-20 {
+    padding-left: 1.25rem;
+  }
+  .sm\:px-20 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+  .sm\:py-20 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+  .sm\:m-20 {
+    margin: 1.25rem;
+  }
+  .sm\:mt-20 {
+    margin-top: 1.25rem;
+  }
+  .sm\:mr-20 {
+    margin-right: 1.25rem;
+  }
+  .sm\:mb-20 {
+    margin-bottom: 1.25rem;
+  }
+  .sm\:ml-20 {
+    margin-left: 1.25rem;
+  }
+  .sm\:mx-20 {
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
+  }
+  .sm\:my-20 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:p-20 {
+    padding: 1.25rem;
+  }
+  .md\:pt-20 {
+    padding-top: 1.25rem;
+  }
+  .md\:pr-20 {
+    padding-right: 1.25rem;
+  }
+  .md\:pb-20 {
+    padding-bottom: 1.25rem;
+  }
+  .md\:pl-20 {
+    padding-left: 1.25rem;
+  }
+  .md\:px-20 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+  .md\:py-20 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+  .md\:m-20 {
+    margin: 1.25rem;
+  }
+  .md\:mt-20 {
+    margin-top: 1.25rem;
+  }
+  .md\:mr-20 {
+    margin-right: 1.25rem;
+  }
+  .md\:mb-20 {
+    margin-bottom: 1.25rem;
+  }
+  .md\:ml-20 {
+    margin-left: 1.25rem;
+  }
+  .md\:mx-20 {
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
+  }
+  .md\:my-20 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:p-20 {
+    padding: 1.25rem;
+  }
+  .lg\:pt-20 {
+    padding-top: 1.25rem;
+  }
+  .lg\:pr-20 {
+    padding-right: 1.25rem;
+  }
+  .lg\:pb-20 {
+    padding-bottom: 1.25rem;
+  }
+  .lg\:pl-20 {
+    padding-left: 1.25rem;
+  }
+  .lg\:px-20 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+  .lg\:py-20 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+  .lg\:m-20 {
+    margin: 1.25rem;
+  }
+  .lg\:mt-20 {
+    margin-top: 1.25rem;
+  }
+  .lg\:mr-20 {
+    margin-right: 1.25rem;
+  }
+  .lg\:mb-20 {
+    margin-bottom: 1.25rem;
+  }
+  .lg\:ml-20 {
+    margin-left: 1.25rem;
+  }
+  .lg\:mx-20 {
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
+  }
+  .lg\:my-20 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+}
+
+.p-24 {
+  padding: 1.5rem;
+}
+
+.pt-24 {
+  padding-top: 1.5rem;
+}
+
+.pr-24 {
+  padding-right: 1.5rem;
+}
+
+.pb-24 {
+  padding-bottom: 1.5rem;
+}
+
+.pl-24 {
+  padding-left: 1.5rem;
+}
+
+.px-24 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-24 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.m-24 {
+  margin: 1.5rem;
+}
+
+.mt-24 {
+  margin-top: 1.5rem;
+}
+
+.mr-24 {
+  margin-right: 1.5rem;
+}
+
+.mb-24 {
+  margin-bottom: 1.5rem;
+}
+
+.ml-24 {
+  margin-left: 1.5rem;
+}
+
+.mx-24 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.my-24 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (min-width: 576px) {
+  .sm\:p-24 {
+    padding: 1.5rem;
+  }
+  .sm\:pt-24 {
+    padding-top: 1.5rem;
+  }
+  .sm\:pr-24 {
+    padding-right: 1.5rem;
+  }
+  .sm\:pb-24 {
+    padding-bottom: 1.5rem;
+  }
+  .sm\:pl-24 {
+    padding-left: 1.5rem;
+  }
+  .sm\:px-24 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+  .sm\:py-24 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+  .sm\:m-24 {
+    margin: 1.5rem;
+  }
+  .sm\:mt-24 {
+    margin-top: 1.5rem;
+  }
+  .sm\:mr-24 {
+    margin-right: 1.5rem;
+  }
+  .sm\:mb-24 {
+    margin-bottom: 1.5rem;
+  }
+  .sm\:ml-24 {
+    margin-left: 1.5rem;
+  }
+  .sm\:mx-24 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+  .sm\:my-24 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:p-24 {
+    padding: 1.5rem;
+  }
+  .md\:pt-24 {
+    padding-top: 1.5rem;
+  }
+  .md\:pr-24 {
+    padding-right: 1.5rem;
+  }
+  .md\:pb-24 {
+    padding-bottom: 1.5rem;
+  }
+  .md\:pl-24 {
+    padding-left: 1.5rem;
+  }
+  .md\:px-24 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+  .md\:py-24 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+  .md\:m-24 {
+    margin: 1.5rem;
+  }
+  .md\:mt-24 {
+    margin-top: 1.5rem;
+  }
+  .md\:mr-24 {
+    margin-right: 1.5rem;
+  }
+  .md\:mb-24 {
+    margin-bottom: 1.5rem;
+  }
+  .md\:ml-24 {
+    margin-left: 1.5rem;
+  }
+  .md\:mx-24 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+  .md\:my-24 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:p-24 {
+    padding: 1.5rem;
+  }
+  .lg\:pt-24 {
+    padding-top: 1.5rem;
+  }
+  .lg\:pr-24 {
+    padding-right: 1.5rem;
+  }
+  .lg\:pb-24 {
+    padding-bottom: 1.5rem;
+  }
+  .lg\:pl-24 {
+    padding-left: 1.5rem;
+  }
+  .lg\:px-24 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+  .lg\:py-24 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+  .lg\:m-24 {
+    margin: 1.5rem;
+  }
+  .lg\:mt-24 {
+    margin-top: 1.5rem;
+  }
+  .lg\:mr-24 {
+    margin-right: 1.5rem;
+  }
+  .lg\:mb-24 {
+    margin-bottom: 1.5rem;
+  }
+  .lg\:ml-24 {
+    margin-left: 1.5rem;
+  }
+  .lg\:mx-24 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+  .lg\:my-24 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+.p-36 {
+  padding: 2.25rem;
+}
+
+.pt-36 {
+  padding-top: 2.25rem;
+}
+
+.pr-36 {
+  padding-right: 2.25rem;
+}
+
+.pb-36 {
+  padding-bottom: 2.25rem;
+}
+
+.pl-36 {
+  padding-left: 2.25rem;
+}
+
+.px-36 {
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+}
+
+.py-36 {
+  padding-top: 2.25rem;
+  padding-bottom: 2.25rem;
+}
+
+.m-36 {
+  margin: 2.25rem;
+}
+
+.mt-36 {
+  margin-top: 2.25rem;
+}
+
+.mr-36 {
+  margin-right: 2.25rem;
+}
+
+.mb-36 {
+  margin-bottom: 2.25rem;
+}
+
+.ml-36 {
+  margin-left: 2.25rem;
+}
+
+.mx-36 {
+  margin-left: 2.25rem;
+  margin-right: 2.25rem;
+}
+
+.my-36 {
+  margin-top: 2.25rem;
+  margin-bottom: 2.25rem;
+}
+
+@media (min-width: 576px) {
+  .sm\:p-36 {
+    padding: 2.25rem;
+  }
+  .sm\:pt-36 {
+    padding-top: 2.25rem;
+  }
+  .sm\:pr-36 {
+    padding-right: 2.25rem;
+  }
+  .sm\:pb-36 {
+    padding-bottom: 2.25rem;
+  }
+  .sm\:pl-36 {
+    padding-left: 2.25rem;
+  }
+  .sm\:px-36 {
+    padding-left: 2.25rem;
+    padding-right: 2.25rem;
+  }
+  .sm\:py-36 {
+    padding-top: 2.25rem;
+    padding-bottom: 2.25rem;
+  }
+  .sm\:m-36 {
+    margin: 2.25rem;
+  }
+  .sm\:mt-36 {
+    margin-top: 2.25rem;
+  }
+  .sm\:mr-36 {
+    margin-right: 2.25rem;
+  }
+  .sm\:mb-36 {
+    margin-bottom: 2.25rem;
+  }
+  .sm\:ml-36 {
+    margin-left: 2.25rem;
+  }
+  .sm\:mx-36 {
+    margin-left: 2.25rem;
+    margin-right: 2.25rem;
+  }
+  .sm\:my-36 {
+    margin-top: 2.25rem;
+    margin-bottom: 2.25rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:p-36 {
+    padding: 2.25rem;
+  }
+  .md\:pt-36 {
+    padding-top: 2.25rem;
+  }
+  .md\:pr-36 {
+    padding-right: 2.25rem;
+  }
+  .md\:pb-36 {
+    padding-bottom: 2.25rem;
+  }
+  .md\:pl-36 {
+    padding-left: 2.25rem;
+  }
+  .md\:px-36 {
+    padding-left: 2.25rem;
+    padding-right: 2.25rem;
+  }
+  .md\:py-36 {
+    padding-top: 2.25rem;
+    padding-bottom: 2.25rem;
+  }
+  .md\:m-36 {
+    margin: 2.25rem;
+  }
+  .md\:mt-36 {
+    margin-top: 2.25rem;
+  }
+  .md\:mr-36 {
+    margin-right: 2.25rem;
+  }
+  .md\:mb-36 {
+    margin-bottom: 2.25rem;
+  }
+  .md\:ml-36 {
+    margin-left: 2.25rem;
+  }
+  .md\:mx-36 {
+    margin-left: 2.25rem;
+    margin-right: 2.25rem;
+  }
+  .md\:my-36 {
+    margin-top: 2.25rem;
+    margin-bottom: 2.25rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:p-36 {
+    padding: 2.25rem;
+  }
+  .lg\:pt-36 {
+    padding-top: 2.25rem;
+  }
+  .lg\:pr-36 {
+    padding-right: 2.25rem;
+  }
+  .lg\:pb-36 {
+    padding-bottom: 2.25rem;
+  }
+  .lg\:pl-36 {
+    padding-left: 2.25rem;
+  }
+  .lg\:px-36 {
+    padding-left: 2.25rem;
+    padding-right: 2.25rem;
+  }
+  .lg\:py-36 {
+    padding-top: 2.25rem;
+    padding-bottom: 2.25rem;
+  }
+  .lg\:m-36 {
+    margin: 2.25rem;
+  }
+  .lg\:mt-36 {
+    margin-top: 2.25rem;
+  }
+  .lg\:mr-36 {
+    margin-right: 2.25rem;
+  }
+  .lg\:mb-36 {
+    margin-bottom: 2.25rem;
+  }
+  .lg\:ml-36 {
+    margin-left: 2.25rem;
+  }
+  .lg\:mx-36 {
+    margin-left: 2.25rem;
+    margin-right: 2.25rem;
+  }
+  .lg\:my-36 {
+    margin-top: 2.25rem;
+    margin-bottom: 2.25rem;
+  }
+}
+
+.p-auto {
+  padding: auto;
+}
+
+.pt-auto {
+  padding-top: auto;
+}
+
+.pr-auto {
+  padding-right: auto;
+}
+
+.pb-auto {
+  padding-bottom: auto;
+}
+
+.pl-auto {
+  padding-left: auto;
+}
+
+.px-auto {
+  padding-left: auto;
+  padding-right: auto;
+}
+
+.py-auto {
+  padding-top: auto;
+  padding-bottom: auto;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+@media (min-width: 576px) {
+  .sm\:p-auto {
+    padding: auto;
+  }
+  .sm\:pt-auto {
+    padding-top: auto;
+  }
+  .sm\:pr-auto {
+    padding-right: auto;
+  }
+  .sm\:pb-auto {
+    padding-bottom: auto;
+  }
+  .sm\:pl-auto {
+    padding-left: auto;
+  }
+  .sm\:px-auto {
+    padding-left: auto;
+    padding-right: auto;
+  }
+  .sm\:py-auto {
+    padding-top: auto;
+    padding-bottom: auto;
+  }
+  .sm\:m-auto {
+    margin: auto;
+  }
+  .sm\:mt-auto {
+    margin-top: auto;
+  }
+  .sm\:mr-auto {
+    margin-right: auto;
+  }
+  .sm\:mb-auto {
+    margin-bottom: auto;
+  }
+  .sm\:ml-auto {
+    margin-left: auto;
+  }
+  .sm\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .sm\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:p-auto {
+    padding: auto;
+  }
+  .md\:pt-auto {
+    padding-top: auto;
+  }
+  .md\:pr-auto {
+    padding-right: auto;
+  }
+  .md\:pb-auto {
+    padding-bottom: auto;
+  }
+  .md\:pl-auto {
+    padding-left: auto;
+  }
+  .md\:px-auto {
+    padding-left: auto;
+    padding-right: auto;
+  }
+  .md\:py-auto {
+    padding-top: auto;
+    padding-bottom: auto;
+  }
+  .md\:m-auto {
+    margin: auto;
+  }
+  .md\:mt-auto {
+    margin-top: auto;
+  }
+  .md\:mr-auto {
+    margin-right: auto;
+  }
+  .md\:mb-auto {
+    margin-bottom: auto;
+  }
+  .md\:ml-auto {
+    margin-left: auto;
+  }
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .md\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:p-auto {
+    padding: auto;
+  }
+  .lg\:pt-auto {
+    padding-top: auto;
+  }
+  .lg\:pr-auto {
+    padding-right: auto;
+  }
+  .lg\:pb-auto {
+    padding-bottom: auto;
+  }
+  .lg\:pl-auto {
+    padding-left: auto;
+  }
+  .lg\:px-auto {
+    padding-left: auto;
+    padding-right: auto;
+  }
+  .lg\:py-auto {
+    padding-top: auto;
+    padding-bottom: auto;
+  }
+  .lg\:m-auto {
+    margin: auto;
+  }
+  .lg\:mt-auto {
+    margin-top: auto;
+  }
+  .lg\:mr-auto {
+    margin-right: auto;
+  }
+  .lg\:mb-auto {
+    margin-bottom: auto;
+  }
+  .lg\:ml-auto {
+    margin-left: auto;
+  }
+  .lg\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .lg\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+}
+
+/* -------------------------------------------------- */
+/* ==Grillade : système de micro-grille  de KNACSS   */
+/* ------------------------------------------------ */
+.grid {
+  display: grid;
+}
+
+@media (min-width: 576px) {
+  .sm\:grid {
+    display: grid;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:grid {
+    display: grid;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:grid {
+    display: grid;
+  }
+}
+
+/* grid-template-columns initialisation */
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+/* grid-template-columns au sein des breakpoints */
+@media (min-width: 576px) {
+  .sm\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .sm\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .sm\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .sm\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .md\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .md\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .lg\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .lg\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+/* gap initialisation */
+.gap-0 {
+  gap: 0;
+}
+
+.gap-x-0 {
+  column-gap: 0;
+}
+
+.gap-y-0 {
+  row-gap: 0;
+}
+
+.gap-5 {
+  gap: 0.313rem;
+}
+
+.gap-x-5 {
+  column-gap: 0.313rem;
+}
+
+.gap-y-5 {
+  row-gap: 0.313rem;
+}
+
+.gap-10 {
+  gap: 0.625rem;
+}
+
+.gap-x-10 {
+  column-gap: 0.625rem;
+}
+
+.gap-y-10 {
+  row-gap: 0.625rem;
+}
+
+.gap-16 {
+  gap: 1rem;
+}
+
+.gap-x-16 {
+  column-gap: 1rem;
+}
+
+.gap-y-16 {
+  row-gap: 1rem;
+}
+
+.gap-20 {
+  gap: 1.25rem;
+}
+
+.gap-x-20 {
+  column-gap: 1.25rem;
+}
+
+.gap-y-20 {
+  row-gap: 1.25rem;
+}
+
+.gap-36 {
+  gap: 2.25rem;
+}
+
+.gap-x-36 {
+  column-gap: 2.25rem;
+}
+
+.gap-y-36 {
+  row-gap: 2.25rem;
+}
+
+/* gap au sein des breakpoints */
+@media (min-width: 576px) {
+  .sm\:gap-0 {
+    gap: 0;
+  }
+  .sm\:gap-x-0 {
+    column-gap: 0;
+  }
+  .sm\:gap-y-0 {
+    row-gap: 0;
+  }
+  .sm\:gap-5 {
+    gap: 0.313rem;
+  }
+  .sm\:gap-x-5 {
+    column-gap: 0.313rem;
+  }
+  .sm\:gap-y-5 {
+    row-gap: 0.313rem;
+  }
+  .sm\:gap-10 {
+    gap: 0.625rem;
+  }
+  .sm\:gap-x-10 {
+    column-gap: 0.625rem;
+  }
+  .sm\:gap-y-10 {
+    row-gap: 0.625rem;
+  }
+  .sm\:gap-16 {
+    gap: 1rem;
+  }
+  .sm\:gap-x-16 {
+    column-gap: 1rem;
+  }
+  .sm\:gap-y-16 {
+    row-gap: 1rem;
+  }
+  .sm\:gap-20 {
+    gap: 1.25rem;
+  }
+  .sm\:gap-x-20 {
+    column-gap: 1.25rem;
+  }
+  .sm\:gap-y-20 {
+    row-gap: 1.25rem;
+  }
+  .sm\:gap-36 {
+    gap: 2.25rem;
+  }
+  .sm\:gap-x-36 {
+    column-gap: 2.25rem;
+  }
+  .sm\:gap-y-36 {
+    row-gap: 2.25rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:gap-0 {
+    gap: 0;
+  }
+  .md\:gap-x-0 {
+    column-gap: 0;
+  }
+  .md\:gap-y-0 {
+    row-gap: 0;
+  }
+  .md\:gap-5 {
+    gap: 0.313rem;
+  }
+  .md\:gap-x-5 {
+    column-gap: 0.313rem;
+  }
+  .md\:gap-y-5 {
+    row-gap: 0.313rem;
+  }
+  .md\:gap-10 {
+    gap: 0.625rem;
+  }
+  .md\:gap-x-10 {
+    column-gap: 0.625rem;
+  }
+  .md\:gap-y-10 {
+    row-gap: 0.625rem;
+  }
+  .md\:gap-16 {
+    gap: 1rem;
+  }
+  .md\:gap-x-16 {
+    column-gap: 1rem;
+  }
+  .md\:gap-y-16 {
+    row-gap: 1rem;
+  }
+  .md\:gap-20 {
+    gap: 1.25rem;
+  }
+  .md\:gap-x-20 {
+    column-gap: 1.25rem;
+  }
+  .md\:gap-y-20 {
+    row-gap: 1.25rem;
+  }
+  .md\:gap-36 {
+    gap: 2.25rem;
+  }
+  .md\:gap-x-36 {
+    column-gap: 2.25rem;
+  }
+  .md\:gap-y-36 {
+    row-gap: 2.25rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:gap-0 {
+    gap: 0;
+  }
+  .lg\:gap-x-0 {
+    column-gap: 0;
+  }
+  .lg\:gap-y-0 {
+    row-gap: 0;
+  }
+  .lg\:gap-5 {
+    gap: 0.313rem;
+  }
+  .lg\:gap-x-5 {
+    column-gap: 0.313rem;
+  }
+  .lg\:gap-y-5 {
+    row-gap: 0.313rem;
+  }
+  .lg\:gap-10 {
+    gap: 0.625rem;
+  }
+  .lg\:gap-x-10 {
+    column-gap: 0.625rem;
+  }
+  .lg\:gap-y-10 {
+    row-gap: 0.625rem;
+  }
+  .lg\:gap-16 {
+    gap: 1rem;
+  }
+  .lg\:gap-x-16 {
+    column-gap: 1rem;
+  }
+  .lg\:gap-y-16 {
+    row-gap: 1rem;
+  }
+  .lg\:gap-20 {
+    gap: 1.25rem;
+  }
+  .lg\:gap-x-20 {
+    column-gap: 1.25rem;
+  }
+  .lg\:gap-y-20 {
+    row-gap: 1.25rem;
+  }
+  .lg\:gap-36 {
+    gap: 2.25rem;
+  }
+  .lg\:gap-x-36 {
+    column-gap: 2.25rem;
+  }
+  .lg\:gap-y-36 {
+    row-gap: 2.25rem;
+  }
+}
+
+/* grid-items initialisation */
+.col-start-1 {
+  grid-column-start: 1;
+}
+
+.col-end-1 {
+  grid-column-end: 1;
+}
+
+.col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.row-start-1 {
+  grid-row-start: 1;
+}
+
+.row-end-1 {
+  grid-row-end: 1;
+}
+
+.row-span-1 {
+  grid-row: span 1 / span 1;
+}
+
+.col-start-2 {
+  grid-column-start: 2;
+}
+
+.col-end-2 {
+  grid-column-end: 2;
+}
+
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.row-start-2 {
+  grid-row-start: 2;
+}
+
+.row-end-2 {
+  grid-row-end: 2;
+}
+
+.row-span-2 {
+  grid-row: span 2 / span 2;
+}
+
+.col-start-3 {
+  grid-column-start: 3;
+}
+
+.col-end-3 {
+  grid-column-end: 3;
+}
+
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.row-start-3 {
+  grid-row-start: 3;
+}
+
+.row-end-3 {
+  grid-row-end: 3;
+}
+
+.row-span-3 {
+  grid-row: span 3 / span 3;
+}
+
+.col-start-4 {
+  grid-column-start: 4;
+}
+
+.col-end-4 {
+  grid-column-end: 4;
+}
+
+.col-span-4 {
+  grid-column: span 4 / span 4;
+}
+
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.row-start-4 {
+  grid-row-start: 4;
+}
+
+.row-end-4 {
+  grid-row-end: 4;
+}
+
+.row-span-4 {
+  grid-row: span 4 / span 4;
+}
+
+.col-start-5 {
+  grid-column-start: 5;
+}
+
+.col-end-5 {
+  grid-column-end: 5;
+}
+
+.col-span-5 {
+  grid-column: span 5 / span 5;
+}
+
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.row-start-5 {
+  grid-row-start: 5;
+}
+
+.row-end-5 {
+  grid-row-end: 5;
+}
+
+.row-span-5 {
+  grid-row: span 5 / span 5;
+}
+
+.col-start-6 {
+  grid-column-start: 6;
+}
+
+.col-end-6 {
+  grid-column-end: 6;
+}
+
+.col-span-6 {
+  grid-column: span 6 / span 6;
+}
+
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.row-start-6 {
+  grid-row-start: 6;
+}
+
+.row-end-6 {
+  grid-row-end: 6;
+}
+
+.row-span-6 {
+  grid-row: span 6 / span 6;
+}
+
+/* grid-items au sein des breakpoints */
+@media (min-width: 576px) {
+  .sm\:col-start-1 {
+    grid-column-start: 1;
+  }
+  .sm\:col-end-1 {
+    grid-column-end: 1;
+  }
+  .sm\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .sm\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .sm\:row-start-1 {
+    grid-row-start: 1;
+  }
+  .sm\:row-end-1 {
+    grid-row-end: 1;
+  }
+  .sm\:row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .sm\:col-start-2 {
+    grid-column-start: 2;
+  }
+  .sm\:col-end-2 {
+    grid-column-end: 2;
+  }
+  .sm\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .sm\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .sm\:row-start-2 {
+    grid-row-start: 2;
+  }
+  .sm\:row-end-2 {
+    grid-row-end: 2;
+  }
+  .sm\:row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .sm\:col-start-3 {
+    grid-column-start: 3;
+  }
+  .sm\:col-end-3 {
+    grid-column-end: 3;
+  }
+  .sm\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .sm\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .sm\:row-start-3 {
+    grid-row-start: 3;
+  }
+  .sm\:row-end-3 {
+    grid-row-end: 3;
+  }
+  .sm\:row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .sm\:col-start-4 {
+    grid-column-start: 4;
+  }
+  .sm\:col-end-4 {
+    grid-column-end: 4;
+  }
+  .sm\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .sm\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .sm\:row-start-4 {
+    grid-row-start: 4;
+  }
+  .sm\:row-end-4 {
+    grid-row-end: 4;
+  }
+  .sm\:row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .sm\:col-start-5 {
+    grid-column-start: 5;
+  }
+  .sm\:col-end-5 {
+    grid-column-end: 5;
+  }
+  .sm\:col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .sm\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .sm\:row-start-5 {
+    grid-row-start: 5;
+  }
+  .sm\:row-end-5 {
+    grid-row-end: 5;
+  }
+  .sm\:row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .sm\:col-start-6 {
+    grid-column-start: 6;
+  }
+  .sm\:col-end-6 {
+    grid-column-end: 6;
+  }
+  .sm\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .sm\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .sm\:row-start-6 {
+    grid-row-start: 6;
+  }
+  .sm\:row-end-6 {
+    grid-row-end: 6;
+  }
+  .sm\:row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+}
+
+@media (min-width: 992px) {
+  .md\:col-start-1 {
+    grid-column-start: 1;
+  }
+  .md\:col-end-1 {
+    grid-column-end: 1;
+  }
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .md\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .md\:row-start-1 {
+    grid-row-start: 1;
+  }
+  .md\:row-end-1 {
+    grid-row-end: 1;
+  }
+  .md\:row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .md\:col-start-2 {
+    grid-column-start: 2;
+  }
+  .md\:col-end-2 {
+    grid-column-end: 2;
+  }
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .md\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .md\:row-start-2 {
+    grid-row-start: 2;
+  }
+  .md\:row-end-2 {
+    grid-row-end: 2;
+  }
+  .md\:row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .md\:col-start-3 {
+    grid-column-start: 3;
+  }
+  .md\:col-end-3 {
+    grid-column-end: 3;
+  }
+  .md\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .md\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .md\:row-start-3 {
+    grid-row-start: 3;
+  }
+  .md\:row-end-3 {
+    grid-row-end: 3;
+  }
+  .md\:row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .md\:col-start-4 {
+    grid-column-start: 4;
+  }
+  .md\:col-end-4 {
+    grid-column-end: 4;
+  }
+  .md\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .md\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .md\:row-start-4 {
+    grid-row-start: 4;
+  }
+  .md\:row-end-4 {
+    grid-row-end: 4;
+  }
+  .md\:row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .md\:col-start-5 {
+    grid-column-start: 5;
+  }
+  .md\:col-end-5 {
+    grid-column-end: 5;
+  }
+  .md\:col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .md\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .md\:row-start-5 {
+    grid-row-start: 5;
+  }
+  .md\:row-end-5 {
+    grid-row-end: 5;
+  }
+  .md\:row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .md\:col-start-6 {
+    grid-column-start: 6;
+  }
+  .md\:col-end-6 {
+    grid-column-end: 6;
+  }
+  .md\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .md\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .md\:row-start-6 {
+    grid-row-start: 6;
+  }
+  .md\:row-end-6 {
+    grid-row-end: 6;
+  }
+  .md\:row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+}
+
+@media (min-width: 1400px) {
+  .lg\:col-start-1 {
+    grid-column-start: 1;
+  }
+  .lg\:col-end-1 {
+    grid-column-end: 1;
+  }
+  .lg\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .lg\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .lg\:row-start-1 {
+    grid-row-start: 1;
+  }
+  .lg\:row-end-1 {
+    grid-row-end: 1;
+  }
+  .lg\:row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .lg\:col-start-2 {
+    grid-column-start: 2;
+  }
+  .lg\:col-end-2 {
+    grid-column-end: 2;
+  }
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .lg\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .lg\:row-start-2 {
+    grid-row-start: 2;
+  }
+  .lg\:row-end-2 {
+    grid-row-end: 2;
+  }
+  .lg\:row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .lg\:col-start-3 {
+    grid-column-start: 3;
+  }
+  .lg\:col-end-3 {
+    grid-column-end: 3;
+  }
+  .lg\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .lg\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .lg\:row-start-3 {
+    grid-row-start: 3;
+  }
+  .lg\:row-end-3 {
+    grid-row-end: 3;
+  }
+  .lg\:row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .lg\:col-start-4 {
+    grid-column-start: 4;
+  }
+  .lg\:col-end-4 {
+    grid-column-end: 4;
+  }
+  .lg\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .lg\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .lg\:row-start-4 {
+    grid-row-start: 4;
+  }
+  .lg\:row-end-4 {
+    grid-row-end: 4;
+  }
+  .lg\:row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .lg\:col-start-5 {
+    grid-column-start: 5;
+  }
+  .lg\:col-end-5 {
+    grid-column-end: 5;
+  }
+  .lg\:col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .lg\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .lg\:row-start-5 {
+    grid-row-start: 5;
+  }
+  .lg\:row-end-5 {
+    grid-row-end: 5;
+  }
+  .lg\:row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .lg\:col-start-6 {
+    grid-column-start: 6;
+  }
+  .lg\:col-end-6 {
+    grid-column-end: 6;
+  }
+  .lg\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .lg\:col-span-full {
+    grid-column: 1 / -1;
+  }
+  .lg\:row-start-6 {
+    grid-row-start: 6;
+  }
+  .lg\:row-end-6 {
+    grid-row-end: 6;
+  }
+  .lg\:row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+}
diff --git a/template.html b/template.html
new file mode 100644
index 0000000..f312afa
--- /dev/null
+++ b/template.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>$title$</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+	<header>
+		ici un header
+	</header>
+	<main>
+$body$
+	</main>
+	<footer>
+		ici un footer
+	</footer>
+</body>
+</html>