/* =========================================================
   Fonts
   ========================================================= */
@font-face {
  font-family: "Arsenal";
  src: url("../fonts/arsenal-regular.woff2") format("woff2"),
       url("../fonts/arsenal-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arsenal";
  src: url("../fonts/arsenal-italic.woff2") format("woff2"),
       url("../fonts/arsenal-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Arsenal";
  src: url("../fonts/arsenal-bold.woff2") format("woff2"),
       url("../fonts/arsenal-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arsenal";
  src: url("../fonts/arsenal-boldItalic.woff2") format("woff2"),
       url("../fonts/arsenal-boldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-regular.woff2") format("woff2"),
    url("../fonts/playfair-display-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic.woff2") format("woff2"),
    url("../fonts/playfair-display-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-bold.woff2") format("woff2"),
    url("../fonts/playfair-display-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-bold-italic.woff2") format("woff2"),
    url("../fonts/playfair-display-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =========================================================
   Sistema general + diseño
   ========================================================= */
:root {
  --container-max: 1410px;

  --space-inline-sm: 20px;
  --space-inline-md: 24px;
  --space-inline-lg: 30px;

  --gap-xs: 10px;
  --gap-sm: 20px;
  --gap-md: 30px;
  --gap-lg: 40px;
  --gap-xl: 60px;

  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --space-0: 0;
  --space-xs: 10px;
  --space-sm: 20px;
  --space-md: 30px;
  --space-lg: 40px;
  --space-xl: 60px;
  --space-xxl: 80px;

  --font-sans: "Arsenal", sans-serif;
  --font-serif: "Playfair Display", serif;

  --primary: #d21221;
  --secondary: #fcf3ed;
  --tertiary: #fffcf9;
  --quaternary: #fffcf9;
  --quinary: #fbf1e7;
  --senary: #E98C93;
  --octanary: #9c0c18;
  --dark: #111;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  background: var(--primary);
  color: var(--tertiary);
}

input[type="search"],
input[type=text],
input[type=email] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input:focus-visible,
button:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: none;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html.open {
  height: 100vh;
  overflow: hidden;
}

body {
  margin: 0;
  color: var(--dark);
  font-family: var(--font-sans);
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: normal;
}

/* =========================================================
   Containers
   ========================================================= */

.container,
.container-full {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-inline-sm);
  padding-right: var(--space-inline-sm);
}

.container {
  max-width: calc(var(--container-max) + (var(--space-inline-sm) * 2));
}

.container-full {
  max-width: 100%;
}

@media (min-width: 768px) {
  .container,
  .container-full {
    padding-left: var(--space-inline-md);
    padding-right: var(--space-inline-md);
  }

  .container {
    max-width: calc(var(--container-max) + (var(--space-inline-md) * 2));
  }
}

@media (min-width: 1024px) {
  .container,
  .container-full {
    padding-left: var(--space-inline-lg);
    padding-right: var(--space-inline-lg);
  }

  .container {
    max-width: calc(var(--container-max) + (var(--space-inline-lg) * 2));
  }
}

.container-md {
  width: 100%;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-inline-sm);
  padding-right: var(--space-inline-sm);
}

@media (min-width: 768px) {
  .container-md {
    padding-left: var(--space-inline-md);
    padding-right: var(--space-inline-md);
  }
}

@media (min-width: 1024px) {
  .container-md {
    padding-left: var(--space-inline-lg);
    padding-right: var(--space-inline-lg);
  }
}

.container-lg {
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-inline-sm);
  padding-right: var(--space-inline-sm);
}

@media (min-width: 768px) {
  .container-lg {
    padding-left: var(--space-inline-md);
    padding-right: var(--space-inline-md);
  }
}

@media (min-width: 1024px) {
  .container-lg {
    padding-left: var(--space-inline-lg);
    padding-right: var(--space-inline-lg);
  }
}

.container-xl {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-inline-sm);
  padding-right: var(--space-inline-sm);
}

@media (min-width: 768px) {
  .container-xl {
    padding-left: var(--space-inline-md);
    padding-right: var(--space-inline-md);
  }
}

@media (min-width: 1024px) {
  .container-xl {
    padding-left: var(--space-inline-lg);
    padding-right: var(--space-inline-lg);
  }
}

.full-bleed {
  width: auto;
  margin-left: calc(var(--space-inline-sm) * -1);
  margin-right: calc(var(--space-inline-sm) * -1);
}

@media (min-width: 768px) {
  .full-bleed {
    margin-left: calc(var(--space-inline-md) * -1);
    margin-right: calc(var(--space-inline-md) * -1);
  }
}

@media (min-width: 1024px) {
  .full-bleed {
    margin-left: calc(var(--space-inline-lg) * -1);
    margin-right: calc(var(--space-inline-lg) * -1);
  }
}

/* =========================================================
   Display
   ========================================================= */

.block {
  display: block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:grid {
    display: grid;
  }
}

@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  .lg\:grid {
    display: grid;
  }
}

@media (min-width: 1280px) {
  .xl\:block {
    display: block;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:inline-flex {
    display: inline-flex;
  }

  .xl\:grid {
    display: grid;
  }
}

/* =========================================================
   Grid columns
   ========================================================= */

.cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Combinaciones */
.cols-1-1 {
  grid-template-columns: 1fr 1fr;
}

.cols-2-2 {
  grid-template-columns: 1fr 1fr;
}

.cols-2-1 {
  grid-template-columns: 2fr 1fr;
}

.cols-1-2 {
  grid-template-columns: 1fr 2fr;
}

.cols-3-1 {
  grid-template-columns: 3fr 1fr;
}

.cols-1-3 {
  grid-template-columns: 1fr 3fr;
}

.cols-2-1-1 {
  grid-template-columns: 2fr 1fr 1fr;
}

.cols-1-2-1 {
  grid-template-columns: 1fr 2fr 1fr;
}

.cols-1-1-2 {
  grid-template-columns: 1fr 1fr 2fr;
}

@media (min-width: 768px) {
  .md\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:cols-1-1 {
    grid-template-columns: 1fr 1fr;
  }

  .md\:cols-2-2 {
    grid-template-columns: 1fr 1fr;
  }

  .md\:cols-2-1 {
    grid-template-columns: 2fr 1fr;
  }

  .md\:cols-1-2 {
    grid-template-columns: 1fr 2fr;
  }

  .md\:cols-3-1 {
    grid-template-columns: 3fr 1fr;
  }

  .md\:cols-1-3 {
    grid-template-columns: 1fr 3fr;
  }

  .md\:cols-2-1-1 {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .md\:cols-1-2-1 {
    grid-template-columns: 1fr 2fr 1fr;
  }

  .md\:cols-1-1-2 {
    grid-template-columns: 1fr 1fr 2fr;
  }
}

@media (min-width: 1024px) {
  .lg\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:cols-1-1 {
    grid-template-columns: 1fr 1fr;
  }

  .lg\:cols-2-2 {
    grid-template-columns: 1fr 1fr;
  }

  .lg\:cols-2-1 {
    grid-template-columns: 2fr 1fr;
  }

  .lg\:cols-1-2 {
    grid-template-columns: 1fr 2fr;
  }

  .lg\:cols-3-1 {
    grid-template-columns: 3fr 1fr;
  }

  .lg\:cols-1-3 {
    grid-template-columns: 1fr 3fr;
  }

  .lg\:cols-2-1-1 {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .lg\:cols-1-2-1 {
    grid-template-columns: 1fr 2fr 1fr;
  }

  .lg\:cols-1-1-2 {
    grid-template-columns: 1fr 1fr 2fr;
  }
}

@media (min-width: 1280px) {
  .xl\:cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .xl\:cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:cols-1-1 {
    grid-template-columns: 1fr 1fr;
  }

  .xl\:cols-2-2 {
    grid-template-columns: 1fr 1fr;
  }

  .xl\:cols-2-1 {
    grid-template-columns: 2fr 1fr;
  }

  .xl\:cols-1-2 {
    grid-template-columns: 1fr 2fr;
  }

  .xl\:cols-3-1 {
    grid-template-columns: 3fr 1fr;
  }

  .xl\:cols-1-3 {
    grid-template-columns: 1fr 3fr;
  }

  .xl\:cols-2-1-1 {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .xl\:cols-1-2-1 {
    grid-template-columns: 1fr 2fr 1fr;
  }

  .xl\:cols-1-1-2 {
    grid-template-columns: 1fr 1fr 2fr;
  }
}

/* =========================================================
   Gaps
   ========================================================= */

.gap-xs {
  gap: var(--gap-xs);
}

.gap-sm {
  gap: var(--gap-sm);
}

.gap-md {
  gap: var(--gap-md);
}

.gap-lg {
  gap: var(--gap-lg);
}

.gap-xl {
  gap: var(--gap-xl);
}

@media (min-width: 768px) {
  .md\:gap-xs {
    gap: var(--gap-xs);
  }

  .md\:gap-sm {
    gap: var(--gap-sm);
  }

  .md\:gap-md {
    gap: var(--gap-md);
  }

  .md\:gap-lg {
    gap: var(--gap-lg);
  }

  .md\:gap-xl {
    gap: var(--gap-xl);
  }
}

@media (min-width: 1024px) {
  .lg\:gap-xs {
    gap: var(--gap-xs);
  }

  .lg\:gap-sm {
    gap: var(--gap-sm);
  }

  .lg\:gap-md {
    gap: var(--gap-md);
  }

  .lg\:gap-lg {
    gap: var(--gap-lg);
  }

  .lg\:gap-xl {
    gap: var(--gap-xl);
  }
}

@media (min-width: 1280px) {
  .xl\:gap-xs {
    gap: var(--gap-xs);
  }

  .xl\:gap-sm {
    gap: var(--gap-sm);
  }

  .xl\:gap-md {
    gap: var(--gap-md);
  }

  .xl\:gap-lg {
    gap: var(--gap-lg);
  }

  .xl\:gap-xl {
    gap: var(--gap-xl);
  }
}

/* =========================================================
   Grid span
   ========================================================= */

.span-auto {
  grid-column: auto;
}

.span-1 {
  grid-column: span 1;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

@media (min-width: 768px) {
  .md\:span-auto {
    grid-column: auto;
  }

  .md\:span-1 {
    grid-column: span 1;
  }

  .md\:span-2 {
    grid-column: span 2;
  }

  .md\:span-3 {
    grid-column: span 3;
  }

  .md\:span-4 {
    grid-column: span 4;
  }
}

@media (min-width: 1024px) {
  .lg\:span-auto {
    grid-column: auto;
  }

  .lg\:span-1 {
    grid-column: span 1;
  }

  .lg\:span-2 {
    grid-column: span 2;
  }

  .lg\:span-3 {
    grid-column: span 3;
  }

  .lg\:span-4 {
    grid-column: span 4;
  }
}

@media (min-width: 1280px) {
  .xl\:span-auto {
    grid-column: auto;
  }

  .xl\:span-1 {
    grid-column: span 1;
  }

  .xl\:span-2 {
    grid-column: span 2;
  }

  .xl\:span-3 {
    grid-column: span 3;
  }

  .xl\:span-4 {
    grid-column: span 4;
  }
}

/* =========================================================
   Visibility
   ========================================================= */

.hide {
  display: none !important;
}

.show-block {
  display: block !important;
}

.show-flex {
  display: flex !important;
}

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

@media (min-width: 768px) {
  .md\:hide {
    display: none !important;
  }

  .md\:show-block {
    display: block !important;
  }

  .md\:show-flex {
    display: flex !important;
  }

  .md\:show-grid {
    display: grid !important;
  }
}

@media (min-width: 1024px) {
  .lg\:hide {
    display: none !important;
  }

  .lg\:show-block {
    display: block !important;
  }

  .lg\:show-flex {
    display: flex !important;
  }

  .lg\:show-grid {
    display: grid !important;
  }
}

@media (min-width: 1280px) {
  .xl\:hide {
    display: none !important;
  }

  .xl\:show-block {
    display: block !important;
  }

  .xl\:show-flex {
    display: flex !important;
  }

  .xl\:show-grid {
    display: grid !important;
  }
}

/* =========================================================
   Flex direction
   ========================================================= */

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-column {
    flex-direction: column;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

  .md\:flex-nowrap {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1024px) {
  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-column {
    flex-direction: column;
  }

  .lg\:flex-wrap {
    flex-wrap: wrap;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1280px) {
  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:flex-column {
    flex-direction: column;
  }

  .xl\:flex-wrap {
    flex-wrap: wrap;
  }

  .xl\:flex-nowrap {
    flex-wrap: nowrap;
  }
}

/* =========================================================
   Alignment
   ========================================================= */

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

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

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

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

@media (min-width: 768px) {
  .md\:justify-start {
    justify-content: flex-start;
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:justify-end {
    justify-content: flex-end;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:justify-around {
    justify-content: space-around;
  }

  .md\:justify-evenly {
    justify-content: space-evenly;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:items-stretch {
    align-items: stretch;
  }
}

@media (min-width: 1024px) {
  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:justify-around {
    justify-content: space-around;
  }

  .lg\:justify-evenly {
    justify-content: space-evenly;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:items-stretch {
    align-items: stretch;
  }
}

@media (min-width: 1280px) {
  .xl\:justify-start {
    justify-content: flex-start;
  }

  .xl\:justify-center {
    justify-content: center;
  }

  .xl\:justify-end {
    justify-content: flex-end;
  }

  .xl\:justify-between {
    justify-content: space-between;
  }

  .xl\:justify-around {
    justify-content: space-around;
  }

  .xl\:justify-evenly {
    justify-content: space-evenly;
  }

  .xl\:items-start {
    align-items: flex-start;
  }

  .xl\:items-center {
    align-items: center;
  }

  .xl\:items-end {
    align-items: flex-end;
  }

  .xl\:items-stretch {
    align-items: stretch;
  }
}

/* =========================================================
   Padding
   ========================================================= */

.p-0 { padding: var(--space-0); }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }

.pt-0 { padding-top: var(--space-0); }
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-xxl { padding-top: var(--space-xxl); }

.pr-0 { padding-right: var(--space-0); }
.pr-xs { padding-right: var(--space-xs); }
.pr-sm { padding-right: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pr-lg { padding-right: var(--space-lg); }
.pr-xl { padding-right: var(--space-xl); }
.pr-xxl { padding-right: var(--space-xxl); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-xxl { padding-bottom: var(--space-xxl); }

.pl-0 { padding-left: var(--space-0); }
.pl-xs { padding-left: var(--space-xs); }
.pl-sm { padding-left: var(--space-sm); }
.pl-md { padding-left: var(--space-md); }
.pl-lg { padding-left: var(--space-lg); }
.pl-xl { padding-left: var(--space-xl); }
.pl-xxl { padding-left: var(--space-xxl); }

.px-0 {
  padding-left: var(--space-0);
  padding-right: var(--space-0);
}
.px-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}
.px-sm {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}
.px-md {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.px-lg {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.px-xl {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.px-xxl {
  padding-left: var(--space-xxl);
  padding-right: var(--space-xxl);
}

.py-0 {
  padding-top: var(--space-0);
  padding-bottom: var(--space-0);
}
.py-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.py-sm {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.py-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.py-lg {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.py-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.py-xxl {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

/* =========================================================
   Margin 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;
}

/* =========================================================
   Margin
   ========================================================= */

.m-0 { margin: var(--space-0); }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-xxl { margin: var(--space-xxl); }

.mt-0 { margin-top: var(--space-0); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }

.mr-0 { margin-right: var(--space-0); }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }
.mr-xxl { margin-right: var(--space-xxl); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-xxl { margin-bottom: var(--space-xxl); }

.ml-0 { margin-left: var(--space-0); }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }
.ml-xl { margin-left: var(--space-xl); }
.ml-xxl { margin-left: var(--space-xxl); }

.mx-0 {
  margin-left: var(--space-0);
  margin-right: var(--space-0);
}
.mx-xs {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}
.mx-sm {
  margin-left: var(--space-sm);
  margin-right: var(--space-sm);
}
.mx-md {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}
.mx-lg {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}
.mx-xl {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}
.mx-xxl {
  margin-left: var(--space-xxl);
  margin-right: var(--space-xxl);
}

.my-0 {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}
.my-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.my-sm {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.my-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
.my-lg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.my-xxl {
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-xxl);
}

/* =========================================================
   Responsive: md
   ========================================================= */

@media (min-width: 768px) {
  .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; }

  .md\:p-0 { padding: var(--space-0); }
  .md\:p-xs { padding: var(--space-xs); }
  .md\:p-sm { padding: var(--space-sm); }
  .md\:p-md { padding: var(--space-md); }
  .md\:p-lg { padding: var(--space-lg); }
  .md\:p-xl { padding: var(--space-xl); }
  .md\:p-xxl { padding: var(--space-xxl); }

  .md\:pt-0 { padding-top: var(--space-0); }
  .md\:pt-xs { padding-top: var(--space-xs); }
  .md\:pt-sm { padding-top: var(--space-sm); }
  .md\:pt-md { padding-top: var(--space-md); }
  .md\:pt-lg { padding-top: var(--space-lg); }
  .md\:pt-xl { padding-top: var(--space-xl); }
  .md\:pt-xxl { padding-top: var(--space-xxl); }

  .md\:pr-0 { padding-right: var(--space-0); }
  .md\:pr-xs { padding-right: var(--space-xs); }
  .md\:pr-sm { padding-right: var(--space-sm); }
  .md\:pr-md { padding-right: var(--space-md); }
  .md\:pr-lg { padding-right: var(--space-lg); }
  .md\:pr-xl { padding-right: var(--space-xl); }
  .md\:pr-xxl { padding-right: var(--space-xxl); }

  .md\:pb-0 { padding-bottom: var(--space-0); }
  .md\:pb-xs { padding-bottom: var(--space-xs); }
  .md\:pb-sm { padding-bottom: var(--space-sm); }
  .md\:pb-md { padding-bottom: var(--space-md); }
  .md\:pb-lg { padding-bottom: var(--space-lg); }
  .md\:pb-xl { padding-bottom: var(--space-xl); }
  .md\:pb-xxl { padding-bottom: var(--space-xxl); }

  .md\:pl-0 { padding-left: var(--space-0); }
  .md\:pl-xs { padding-left: var(--space-xs); }
  .md\:pl-sm { padding-left: var(--space-sm); }
  .md\:pl-md { padding-left: var(--space-md); }
  .md\:pl-lg { padding-left: var(--space-lg); }
  .md\:pl-xl { padding-left: var(--space-xl); }
  .md\:pl-xxl { padding-left: var(--space-xxl); }

  .md\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
  .md\:px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
  .md\:px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .md\:px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
  .md\:px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .md\:px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
  .md\:px-xxl { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }

  .md\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
  .md\:py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .md\:py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
  .md\:py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .md\:py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .md\:py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .md\:py-xxl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }

  .md\:m-0 { margin: var(--space-0); }
  .md\:m-xs { margin: var(--space-xs); }
  .md\:m-sm { margin: var(--space-sm); }
  .md\:m-md { margin: var(--space-md); }
  .md\:m-lg { margin: var(--space-lg); }
  .md\:m-xl { margin: var(--space-xl); }
  .md\:m-xxl { margin: var(--space-xxl); }

  .md\:mt-0 { margin-top: var(--space-0); }
  .md\:mt-xs { margin-top: var(--space-xs); }
  .md\:mt-sm { margin-top: var(--space-sm); }
  .md\:mt-md { margin-top: var(--space-md); }
  .md\:mt-lg { margin-top: var(--space-lg); }
  .md\:mt-xl { margin-top: var(--space-xl); }
  .md\:mt-xxl { margin-top: var(--space-xxl); }

  .md\:mr-0 { margin-right: var(--space-0); }
  .md\:mr-xs { margin-right: var(--space-xs); }
  .md\:mr-sm { margin-right: var(--space-sm); }
  .md\:mr-md { margin-right: var(--space-md); }
  .md\:mr-lg { margin-right: var(--space-lg); }
  .md\:mr-xl { margin-right: var(--space-xl); }
  .md\:mr-xxl { margin-right: var(--space-xxl); }

  .md\:mb-0 { margin-bottom: var(--space-0); }
  .md\:mb-xs { margin-bottom: var(--space-xs); }
  .md\:mb-sm { margin-bottom: var(--space-sm); }
  .md\:mb-md { margin-bottom: var(--space-md); }
  .md\:mb-lg { margin-bottom: var(--space-lg); }
  .md\:mb-xl { margin-bottom: var(--space-xl); }
  .md\:mb-xxl { margin-bottom: var(--space-xxl); }

  .md\:ml-0 { margin-left: var(--space-0); }
  .md\:ml-xs { margin-left: var(--space-xs); }
  .md\:ml-sm { margin-left: var(--space-sm); }
  .md\:ml-md { margin-left: var(--space-md); }
  .md\:ml-lg { margin-left: var(--space-lg); }
  .md\:ml-xl { margin-left: var(--space-xl); }
  .md\:ml-xxl { margin-left: var(--space-xxl); }

  .md\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
  .md\:mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
  .md\:mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
  .md\:mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
  .md\:mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
  .md\:mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
  .md\:mx-xxl { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }

  .md\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
  .md\:my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
  .md\:my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
  .md\:my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
  .md\:my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
  .md\:my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
  .md\:my-xxl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
}

/* =========================================================
   Responsive: lg
   ========================================================= */

@media (min-width: 1024px) {
  .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; }

  .lg\:p-0 { padding: var(--space-0); }
  .lg\:p-xs { padding: var(--space-xs); }
  .lg\:p-sm { padding: var(--space-sm); }
  .lg\:p-md { padding: var(--space-md); }
  .lg\:p-lg { padding: var(--space-lg); }
  .lg\:p-xl { padding: var(--space-xl); }
  .lg\:p-xxl { padding: var(--space-xxl); }

  .lg\:pt-0 { padding-top: var(--space-0); }
  .lg\:pt-xs { padding-top: var(--space-xs); }
  .lg\:pt-sm { padding-top: var(--space-sm); }
  .lg\:pt-md { padding-top: var(--space-md); }
  .lg\:pt-lg { padding-top: var(--space-lg); }
  .lg\:pt-xl { padding-top: var(--space-xl); }
  .lg\:pt-xxl { padding-top: var(--space-xxl); }

  .lg\:pr-0 { padding-right: var(--space-0); }
  .lg\:pr-xs { padding-right: var(--space-xs); }
  .lg\:pr-sm { padding-right: var(--space-sm); }
  .lg\:pr-md { padding-right: var(--space-md); }
  .lg\:pr-lg { padding-right: var(--space-lg); }
  .lg\:pr-xl { padding-right: var(--space-xl); }
  .lg\:pr-xxl { padding-right: var(--space-xxl); }

  .lg\:pb-0 { padding-bottom: var(--space-0); }
  .lg\:pb-xs { padding-bottom: var(--space-xs); }
  .lg\:pb-sm { padding-bottom: var(--space-sm); }
  .lg\:pb-md { padding-bottom: var(--space-md); }
  .lg\:pb-lg { padding-bottom: var(--space-lg); }
  .lg\:pb-xl { padding-bottom: var(--space-xl); }
  .lg\:pb-xxl { padding-bottom: var(--space-xxl); }

  .lg\:pl-0 { padding-left: var(--space-0); }
  .lg\:pl-xs { padding-left: var(--space-xs); }
  .lg\:pl-sm { padding-left: var(--space-sm); }
  .lg\:pl-md { padding-left: var(--space-md); }
  .lg\:pl-lg { padding-left: var(--space-lg); }
  .lg\:pl-xl { padding-left: var(--space-xl); }
  .lg\:pl-xxl { padding-left: var(--space-xxl); }

  .lg\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
  .lg\:px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
  .lg\:px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .lg\:px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
  .lg\:px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .lg\:px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
  .lg\:px-xxl { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }

  .lg\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
  .lg\:py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .lg\:py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
  .lg\:py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .lg\:py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .lg\:py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .lg\:py-xxl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }

  .lg\:m-0 { margin: var(--space-0); }
  .lg\:m-xs { margin: var(--space-xs); }
  .lg\:m-sm { margin: var(--space-sm); }
  .lg\:m-md { margin: var(--space-md); }
  .lg\:m-lg { margin: var(--space-lg); }
  .lg\:m-xl { margin: var(--space-xl); }
  .lg\:m-xxl { margin: var(--space-xxl); }

  .lg\:mt-0 { margin-top: var(--space-0); }
  .lg\:mt-xs { margin-top: var(--space-xs); }
  .lg\:mt-sm { margin-top: var(--space-sm); }
  .lg\:mt-md { margin-top: var(--space-md); }
  .lg\:mt-lg { margin-top: var(--space-lg); }
  .lg\:mt-xl { margin-top: var(--space-xl); }
  .lg\:mt-xxl { margin-top: var(--space-xxl); }

  .lg\:mr-0 { margin-right: var(--space-0); }
  .lg\:mr-xs { margin-right: var(--space-xs); }
  .lg\:mr-sm { margin-right: var(--space-sm); }
  .lg\:mr-md { margin-right: var(--space-md); }
  .lg\:mr-lg { margin-right: var(--space-lg); }
  .lg\:mr-xl { margin-right: var(--space-xl); }
  .lg\:mr-xxl { margin-right: var(--space-xxl); }

  .lg\:mb-0 { margin-bottom: var(--space-0); }
  .lg\:mb-xs { margin-bottom: var(--space-xs); }
  .lg\:mb-sm { margin-bottom: var(--space-sm); }
  .lg\:mb-md { margin-bottom: var(--space-md); }
  .lg\:mb-lg { margin-bottom: var(--space-lg); }
  .lg\:mb-xl { margin-bottom: var(--space-xl); }
  .lg\:mb-xxl { margin-bottom: var(--space-xxl); }

  .lg\:ml-0 { margin-left: var(--space-0); }
  .lg\:ml-xs { margin-left: var(--space-xs); }
  .lg\:ml-sm { margin-left: var(--space-sm); }
  .lg\:ml-md { margin-left: var(--space-md); }
  .lg\:ml-lg { margin-left: var(--space-lg); }
  .lg\:ml-xl { margin-left: var(--space-xl); }
  .lg\:ml-xxl { margin-left: var(--space-xxl); }

  .lg\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
  .lg\:mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
  .lg\:mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
  .lg\:mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
  .lg\:mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
  .lg\:mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
  .lg\:mx-xxl { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }

  .lg\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
  .lg\:my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
  .lg\:my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
  .lg\:my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
  .lg\:my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
  .lg\:my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
  .lg\:my-xxl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
}

/* =========================================================
   Responsive: xl
   ========================================================= */

@media (min-width: 1280px) {
  .xl\:m-auto { margin: auto; }
  .xl\:mt-auto { margin-top: auto; }
  .xl\:mr-auto { margin-right: auto; }
  .xl\:mb-auto { margin-bottom: auto; }
  .xl\:ml-auto { margin-left: auto; }
  .xl\:mx-auto { margin-left: auto; margin-right: auto; }
  .xl\:my-auto { margin-top: auto; margin-bottom: auto; }

  .xl\:p-0 { padding: var(--space-0); }
  .xl\:p-xs { padding: var(--space-xs); }
  .xl\:p-sm { padding: var(--space-sm); }
  .xl\:p-md { padding: var(--space-md); }
  .xl\:p-lg { padding: var(--space-lg); }
  .xl\:p-xl { padding: var(--space-xl); }
  .xl\:p-xxl { padding: var(--space-xxl); }

  .xl\:pt-0 { padding-top: var(--space-0); }
  .xl\:pt-xs { padding-top: var(--space-xs); }
  .xl\:pt-sm { padding-top: var(--space-sm); }
  .xl\:pt-md { padding-top: var(--space-md); }
  .xl\:pt-lg { padding-top: var(--space-lg); }
  .xl\:pt-xl { padding-top: var(--space-xl); }
  .xl\:pt-xxl { padding-top: var(--space-xxl); }

  .xl\:pr-0 { padding-right: var(--space-0); }
  .xl\:pr-xs { padding-right: var(--space-xs); }
  .xl\:pr-sm { padding-right: var(--space-sm); }
  .xl\:pr-md { padding-right: var(--space-md); }
  .xl\:pr-lg { padding-right: var(--space-lg); }
  .xl\:pr-xl { padding-right: var(--space-xl); }
  .xl\:pr-xxl { padding-right: var(--space-xxl); }

  .xl\:pb-0 { padding-bottom: var(--space-0); }
  .xl\:pb-xs { padding-bottom: var(--space-xs); }
  .xl\:pb-sm { padding-bottom: var(--space-sm); }
  .xl\:pb-md { padding-bottom: var(--space-md); }
  .xl\:pb-lg { padding-bottom: var(--space-lg); }
  .xl\:pb-xl { padding-bottom: var(--space-xl); }
  .xl\:pb-xxl { padding-bottom: var(--space-xxl); }

  .xl\:pl-0 { padding-left: var(--space-0); }
  .xl\:pl-xs { padding-left: var(--space-xs); }
  .xl\:pl-sm { padding-left: var(--space-sm); }
  .xl\:pl-md { padding-left: var(--space-md); }
  .xl\:pl-lg { padding-left: var(--space-lg); }
  .xl\:pl-xl { padding-left: var(--space-xl); }
  .xl\:pl-xxl { padding-left: var(--space-xxl); }

  .xl\:px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
  .xl\:px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
  .xl\:px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .xl\:px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
  .xl\:px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .xl\:px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
  .xl\:px-xxl { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }

  .xl\:py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
  .xl\:py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .xl\:py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
  .xl\:py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .xl\:py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .xl\:py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .xl\:py-xxl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }

  .xl\:m-0 { margin: var(--space-0); }
  .xl\:m-xs { margin: var(--space-xs); }
  .xl\:m-sm { margin: var(--space-sm); }
  .xl\:m-md { margin: var(--space-md); }
  .xl\:m-lg { margin: var(--space-lg); }
  .xl\:m-xl { margin: var(--space-xl); }
  .xl\:m-xxl { margin: var(--space-xxl); }

  .xl\:mt-0 { margin-top: var(--space-0); }
  .xl\:mt-xs { margin-top: var(--space-xs); }
  .xl\:mt-sm { margin-top: var(--space-sm); }
  .xl\:mt-md { margin-top: var(--space-md); }
  .xl\:mt-lg { margin-top: var(--space-lg); }
  .xl\:mt-xl { margin-top: var(--space-xl); }
  .xl\:mt-xxl { margin-top: var(--space-xxl); }

  .xl\:mr-0 { margin-right: var(--space-0); }
  .xl\:mr-xs { margin-right: var(--space-xs); }
  .xl\:mr-sm { margin-right: var(--space-sm); }
  .xl\:mr-md { margin-right: var(--space-md); }
  .xl\:mr-lg { margin-right: var(--space-lg); }
  .xl\:mr-xl { margin-right: var(--space-xl); }
  .xl\:mr-xxl { margin-right: var(--space-xxl); }

  .xl\:mb-0 { margin-bottom: var(--space-0); }
  .xl\:mb-xs { margin-bottom: var(--space-xs); }
  .xl\:mb-sm { margin-bottom: var(--space-sm); }
  .xl\:mb-md { margin-bottom: var(--space-md); }
  .xl\:mb-lg { margin-bottom: var(--space-lg); }
  .xl\:mb-xl { margin-bottom: var(--space-xl); }
  .xl\:mb-xxl { margin-bottom: var(--space-xxl); }

  .xl\:ml-0 { margin-left: var(--space-0); }
  .xl\:ml-xs { margin-left: var(--space-xs); }
  .xl\:ml-sm { margin-left: var(--space-sm); }
  .xl\:ml-md { margin-left: var(--space-md); }
  .xl\:ml-lg { margin-left: var(--space-lg); }
  .xl\:ml-xl { margin-left: var(--space-xl); }
  .xl\:ml-xxl { margin-left: var(--space-xxl); }

  .xl\:mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
  .xl\:mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
  .xl\:mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
  .xl\:mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
  .xl\:mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
  .xl\:mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
  .xl\:mx-xxl { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }

  .xl\:my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
  .xl\:my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
  .xl\:my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
  .xl\:my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
  .xl\:my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
  .xl\:my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
  .xl\:my-xxl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
}

/* =========================================================
   Lists / groups
   ========================================================= */

.list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-row {
  flex-direction: row;
}

.list-column {
  flex-direction: column;
}

.list-wrap {
  flex-wrap: wrap;
}

.list-nowrap {
  flex-wrap: nowrap;
}

@media (min-width: 768px) {
  .md\:list-row {
    flex-direction: row;
  }

  .md\:list-column {
    flex-direction: column;
  }

  .md\:list-wrap {
    flex-wrap: wrap;
  }

  .md\:list-nowrap {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1024px) {
  .lg\:list-row {
    flex-direction: row;
  }

  .lg\:list-column {
    flex-direction: column;
  }

  .lg\:list-wrap {
    flex-wrap: wrap;
  }

  .lg\:list-nowrap {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1280px) {
  .xl\:list-row {
    flex-direction: row;
  }

  .xl\:list-column {
    flex-direction: column;
  }

  .xl\:list-wrap {
    flex-wrap: wrap;
  }

  .xl\:list-nowrap {
    flex-wrap: nowrap;
  }
}

/* =========================================================
   Order
   ========================================================= */

.order-none {
  order: 0;
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

@media (min-width: 768px) {
  .md\:order-none { order: 0; }
  .md\:order-first { order: -9999; }
  .md\:order-last { order: 9999; }
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }
  .md\:order-3 { order: 3; }
  .md\:order-4 { order: 4; }
  .md\:order-5 { order: 5; }
  .md\:order-6 { order: 6; }
  .md\:order-7 { order: 7; }
}

@media (min-width: 1024px) {
  .lg\:order-none { order: 0; }
  .lg\:order-first { order: -9999; }
  .lg\:order-last { order: 9999; }
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:order-3 { order: 3; }
  .lg\:order-4 { order: 4; }
  .lg\:order-5 { order: 5; }
  .lg\:order-6 { order: 6; }
  .lg\:order-7 { order: 7; }
}

@media (min-width: 1280px) {
  .xl\:order-none { order: 0; }
  .xl\:order-first { order: -9999; }
  .xl\:order-last { order: 9999; }
  .xl\:order-1 { order: 1; }
  .xl\:order-2 { order: 2; }
  .xl\:order-3 { order: 3; }
  .xl\:order-4 { order: 4; }
  .xl\:order-5 { order: 5; }
  .xl\:order-6 { order: 6; }
  .xl\:order-7 { order: 7; }
}

/* =========================================================
   Width
   ========================================================= */

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.max-w-full {
  max-width: 100%;
}

@media (min-width: 768px) {
  .md\:w-auto { width: auto; }
  .md\:w-full { width: 100%; }
  .md\:max-w-full { max-width: 100%; }
}

@media (min-width: 1024px) {
  .lg\:w-auto { width: auto; }
  .lg\:w-full { width: 100%; }
  .lg\:max-w-full { max-width: 100%; }
}

@media (min-width: 1280px) {
  .xl\:w-auto { width: auto; }
  .xl\:w-full { width: 100%; }
  .xl\:max-w-full { max-width: 100%; }
}

/* =========================================================
   Height
   ========================================================= */

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-h-full {
  max-height: 100%;
}

@media (min-width: 768px) {
  .md\:h-auto { height: auto; }
  .md\:h-full { height: 100%; }
  .md\:max-h-full { max-height: 100%; }
}

@media (min-width: 1024px) {
  .lg\:h-auto { height: auto; }
  .lg\:h-full { height: 100%; }
  .lg\:max-h-full { max-height: 100%; }
}

@media (min-width: 1280px) {
  .xl\:h-auto { height: auto; }
  .xl\:h-full { height: 100%; }
  .xl\:max-h-full { max-height: 100%; }
}

/* =========================================================
   Text align
   ========================================================= */

.txt-left {
  text-align: left;
}

.txt-center {
  text-align: center;
}

.txt-right {
  text-align: right;
}

.txt-justify {
  text-align: justify;
}

@media (min-width: 768px) {
  .md\:txt-left { text-align: left; }
  .md\:txt-center { text-align: center; }
  .md\:txt-right { text-align: right; }
  .md\:txt-justify { text-align: justify; }
}

@media (min-width: 1024px) {
  .lg\:txt-left { text-align: left; }
  .lg\:txt-center { text-align: center; }
  .lg\:txt-right { text-align: right; }
  .lg\:txt-justify { text-align: justify; }
}

@media (min-width: 1280px) {
  .xl\:txt-left { text-align: left; }
  .xl\:txt-center { text-align: center; }
  .xl\:txt-right { text-align: right; }
  .xl\:txt-justify { text-align: justify; }
}