/* Fonts */
@font-face {
  font-family: "Karla";
  src: url("../font/karla-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("../font/karla-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("../font/karla-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("../font/karla-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("../font/karla-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("../font/karla-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Font faces: Exalted Extended */
@font-face {
  font-family: "Exalted Extended";
  src: url("../font/ExaltedExtended-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Exalted Extended";
  src: url("../font/ExaltedExtended-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* CSS Variables */
:root {
  --font-primary: "Fraunces", "Times New Roman", serif;
  --font-secondary: "Karla", "Segoe UI", sans-serif;
  --font-base: "Lora", Georgia, serif;

  /* Core darks for masculine contrast on a light canvas */
  --color-dark: #2f241e;
  --color-dark-offset: #4a3550;
  --color-gradient-dark: 47, 36, 30;

  /* Jewel + earth accent range inspired by logo and artwork */
  --color-red: #b65a34;
  --color-bright-red: #d8892f;

  /* Soft paper + stone neutrals */
  --color-gray: #6d6258;
  --color-gray-lightest: #efe4ce;

  /* Status colors tuned to new palette */
  --color-notice-warning: #b2462f;
  --color-notice-success: #2e7a6a;

  /* Semantic mappings */
  --color-primary: #c58d2a;
  --color-secondary: #7b4ca3;

  --color-text-base: #2f241e;
  --color-link: #6c4491;
  --color-link-hover: #b97729;

  --color-bg-dark: #352c42;
  --color-bg-light: #f6eedb;
}


/* FONT MATCHING */
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }
.font-base { font-family: var(--font-base); }

/* TEXT COLORS */
.text-color-dark,
.text-dark { color: var(--color-dark); }
.text-dark-offset { color: var(--color-dark-offset); }
.text-color-primary,
.text-primary { color: var(--color-primary); }
.text-color-secondary,
.text-secondary { color: var(--color-secondary); }
.text-white { color: #ffffff; }
.text-red { color: var(--color-red); }
.text-bright-red { color: var(--color-bright-red); }
.text-gray { color: var(--color-gray); }
.text-gray-lightest { color: var(--color-gray-lightest); }
.text-notice-warning { color: var(--color-notice-warning); }
.text-notice-success { color: var(--color-notice-success); }
.text-link { color: var(--color-link); }
.text-link-hover:hover { color: var(--color-link-hover); }
.text-dark-hover:hover { color: var(--color-dark); }
.no-hover,
.no-hover:hover {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: auto; /* keeps it clickable */
}

/* FILL COLORS */
.fill-dark { fill: var(--color-dark); }
.fill-dark-offset { fill: var(--color-dark-offset); }
.fill-primary { fill: var(--color-primary); }
.fill-secondary { fill: var(--color-secondary); }
.fill-red { fill: var(--color-red); }
.fill-bright-red { fill: var(--color-bright-red); }
.fill-gray { fill: var(--color-gray); }
.fill-gray-lightest { fill: var(--color-gray-lightest); }
.fill-notice-warning { fill: var(--color-notice-warning); }
.fill-notice-success { fill: var(--color-notice-success); }
.fill-link { fill: var(--color-link); }
.fill-link-hover:hover { fill: var(--color-link-hover); }

/* BACKGROUND COLORS */
.bg-trans { background: transparent; } 
.bg-black { background-color: #161819; } 
.bg-dark { background-color: var(--color-bg-dark); } 
.bg-dark-raw { background-color: var(--color-dark); }
.bg-light { background-color: var(--color-bg-light); }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-red { background-color: var(--color-red); }
.bg-bright-red { background-color: var(--color-bright-red); }
.bg-gray { background-color: var(--color-gray); }
.bg-gray-lightest { background-color: var(--color-gray-lightest); }
.bg-notice-warning { background-color: var(--color-notice-warning); }
.bg-notice-success { background-color: var(--color-notice-success); }
.bg-link { background-color: var(--color-link); }
.bg-link-hover:hover { background-color: var(--color-link-hover); }
.bg-white-hover:hover { background-color: white; }

.make-white {filter:contrast(0) sepia(9) brightness(10) grayscale(1);}

.rounded-1 { border-radius:.25rem;}
.rounded-2 { border-radius:.5rem;}
.rounded-3 { border-radius:1rem;}
.rounded-4 { border-radius:1.5rem;}
.rounded-5 { border-radius:2rem;}

.rounded-full { border-radius:100%}
.rounded-t-rounded-3 { border-top-left-radius:1rem; border-top-right-radius:1rem; }
.rounded-b-rounded-3 { border-bottom-left-radius:1rem; border-bottom-right-radius:1rem; border-top-width:0; }
.rounded-b-flat { border-bottom-left-radius:0; border-bottom-right-radius:0; }

.rounded-lt-2 { border-top-left-radius:.5rem;}
.rounded-rt-2 { border-top-right-radius:.5rem;}
.rounded-lt-3 { border-top-left-radius:1rem;}
.rounded-rt-3 { border-top-right-radius:1rem;}


/* BOX SHADOW */
.shadow-none { box-shadow: none; }

.shadow-xs {
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.shadow-sm {
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.shadow {
  box-shadow: 0 4px 8px rgba(0,0,0,0.16);
}

.shadow-lg {
  box-shadow: 0 10px 20px rgba(0,0,0,0.22);
}

.shadow-xl {
  box-shadow: 0 20px 40px rgba(0,0,0,0.28);
}

.shadow-2xl {
  box-shadow: 0 20px 80px rgba(0,0,0,0.28);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.16);
}

.shadow-light-xs {
  box-shadow: 0 1px 2px rgba(255,255,255,0.08);
}

.shadow-light-sm {
  box-shadow: 0 2px 4px rgba(255,255,255,0.08);
}

.shadow-light {
  box-shadow: 0 4px 8px rgba(255,255,255,0.08);
}

.shadow-light-lg {
  box-shadow: 0 10px 20px rgba(255,255,255,0.08);
}

.shadow-light-xl {
  box-shadow: 0 20px 40px rgba(255,255,255,0.08);
}

.shadow-light-2xl {
  box-shadow: 0 20px 80px rgba(255,255,255,0.08);
}

.shadow-light-inner {
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.08);
}

/* BORDERS */
.border-primary-solid { border-color:var(--color-primary); border-style:solid; }
.border-primary-dotted { border-color:var(--color-primary); border-style:dotted; }
.border-secondary-solid { border-color:var(--color-secondary); border-style:solid; }
.border-secondary-dotted { border-color:var(--color-secondary); border-style:dotted; }
.border-white-solid { border-color:white; border-style:solid; }
.border-white-dotted { border-color:white; border-style:dotted; }
.border-dark-solid { border-color:var(--color-dark); border-style:solid; }
.border-gray-solid { border-color:var(--color-gray); border-style:solid; }
.border-gray-dotted { border-color:var(--color-gray); border-style:dotted; }


/* BORDER WHITE SOLID */
.border-t-white-solid { border-top-color:white; border-top-style:solid; }
.border-r-white-solid { border-right-color:white; border-right-style:solid; }
.border-b-white-solid { border-bottom-color:white; border-bottom-style:solid; }
.border-l-white-solid { border-left-color:white; border-left-style:solid; }

/* BORDER WHITE DOTTED */
.border-t-white-dotted { border-top-color:white; border-top-style:dotted; }
.border-r-white-dotted { border-right-color:white; border-right-style:dotted; }
.border-b-white-dotted { border-bottom-color:white; border-bottom-style:dotted; }
.border-l-white-dotted { border-left-color:white; border-left-style:dotted; }

/* BORDER DARK SOLID */
.border-t-dark-solid { border-top-color:var(--color-dark); border-top-style:solid; }
.border-r-dark-solid { border-right-color:var(--color-dark); border-right-style:solid; }
.border-b-dark-solid { border-bottom-color:var(--color-dark); border-bottom-style:solid; }
.border-l-dark-solid { border-left-color:var(--color-dark); border-left-style:solid; }

/* BORDER DARK DOTTED */
.border-t-dark-dotted { border-top-color:var(--color-dark); border-top-style:dotted; }
.border-r-dark-dotted { border-right-color:var(--color-dark); border-right-style:dotted; }
.border-b-dark-dotted { border-bottom-color:var(--color-dark); border-bottom-style:dotted; }
.border-l-dark-dotted { border-left-color:var(--color-dark); border-left-style:dotted; }

/* BORDER PRIMARY SOLID */
.border-t-primary-solid { border-top-color:var(--color-primary); border-top-style:solid; }
.border-r-primary-solid { border-right-color:var(--color-primary); border-right-style:solid; }
.border-b-primary-solid { border-bottom-color:var(--color-primary); border-bottom-style:solid; }
.border-l-primary-solid { border-left-color:var(--color-primary); border-left-style:solid; }

/* BORDER PRIMARY DOTTED */
.border-t-primary-dotted { border-top-color:var(--color-primary); border-top-style:dotted; }
.border-r-primary-dotted { border-right-color:var(--color-primary); border-right-style:dotted; }
.border-b-primary-dotted { border-bottom-color:var(--color-primary); border-bottom-style:dotted; }
.border-l-primary-dotted { border-left-color:var(--color-primary); border-left-style:dotted; }

/* BORDER SECONDARY SOLID */
.border-t-secondary-solid { border-top-color:var(--color-secondary); border-top-style:solid; }
.border-r-secondary-solid { border-right-color:var(--color-secondary); border-right-style:solid; }
.border-b-secondary-solid { border-bottom-color:var(--color-secondary); border-bottom-style:solid; }
.border-l-secondary-solid { border-left-color:var(--color-secondary); border-left-style:solid; }

/* BORDER SECONDARY DOTTED */
.border-t-secondary-dotted { border-top-color:var(--color-secondary); border-top-style:dotted; }
.border-r-secondary-dotted { border-right-color:var(--color-secondary); border-right-style:dotted; }
.border-b-secondary-dotted { border-bottom-color:var(--color-secondary); border-bottom-style:dotted; }
.border-l-secondary-dotted { border-left-color:var(--color-secondary); border-left-style:dotted; }

/* BORDER WIDTH 1PX */
.border-b-0 { border-bottom: none; }
.border-l-0 { border-left: none; }
.border-t-0 { border-top: none; }
.border-r-0 { border-right: none; }
/* BORDER WIDTH 1PX */
.border-1 { border-width:1px; }
.border-t-1 { border-top-width:1px; }
.border-r-1 { border-right-width:1px; }
.border-b-1 { border-bottom-width:1px; }
.border-l-1 { border-left-width:1px; }

/* BORDER WIDTH 2PX */
.border-2 { border-width:2px; }
.border-t-2 { border-top-width:2px; }
.border-r-2 { border-right-width:2px; }
.border-b-2 { border-bottom-width:2px; }
.border-l-2 { border-left-width:2px; }

/* BORDER WIDTH 3PX */
.border-3 { border-width:3px; }
.border-t-3 { border-top-width:3px; }
.border-r-3 { border-right-width:3px; }
.border-b-3 { border-bottom-width:3px; }
.border-l-3 { border-left-width:3px; }

/* BORDER WIDTH 4PX */
.border-4 { border-width:4px; }
.border-t-4 { border-top-width:4px; }
.border-r-4 { border-right-width:4px; }
.border-b-4 { border-bottom-width:4px; }
.border-l-4 { border-left-width:4px; }

/* BLENDING */
.blend-overlay{mix-blend-mode:overlay;}
.blend-multiply{mix-blend-mode:multiply;}
.blend-normal{mix-blend-mode:normal;}
.blend-screen{mix-blend-mode:screen;}

/* CURSOR */
.cursor-auto        { cursor: auto; }
.cursor-default     { cursor: default; }
.cursor-pointer     { cursor: pointer; }
.cursor-text        { cursor: text; }
.cursor-move        { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-wait        { cursor: wait; }
.cursor-crosshair   { cursor: crosshair; }
.cursor-grab        { cursor: grab; }
.cursor-grabbing    { cursor: grabbing; }

.opacity-0{opacity:0;}
.opacity-10{opacity:0.1;}
.opacity-20{opacity:0.2;}
.opacity-30{opacity:0.3;}
.opacity-40{opacity:0.4;}
.opacity-50{opacity:0.5;}
.opacity-60{opacity:0.6;}
.opacity-70{opacity:0.7;}
.opacity-80{opacity:0.8;}
.opacity-90{opacity:0.9;}
.opacity-100{opacity:1;}

/* Fixed font-size utilities */
.text-2xs{font-size:0.6rem}
.text-base{font-size:0.7rem}
.text-sm{font-size:0.8rem}
.text-tiny{font-size:0.75rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.5rem}
.text-xl{font-size:2rem}
.text-2xl{font-size:3rem}
.text-3xl{font-size:4rem}
.text-4xl{font-size:5rem}
.text-5xl{font-size:6rem}
.text-6xl{font-size:7rem}
.text-7xl{font-size:8rem}
.text-8xl{font-size:9rem}
.text-9xl{font-size:10rem}

/* Fluid font-size utilities */
.text-fluid-2xs{font-size:clamp(0.625rem, calc(0.5761rem + 0.0136vw), 0.75rem)}
.text-fluid-xs{font-size:clamp(0.75rem, calc(0.7011rem + 0.0136vw), 0.875rem)}
.text-fluid-sm{font-size:clamp(0.875rem, calc(0.8261rem + 0.0136vw), 1rem)}
.text-fluid-base{font-size:clamp(1rem, calc(0.9511rem + 0.0136vw), 1.125rem)}
.text-fluid-lg{font-size:clamp(1.125rem, calc(1.0761rem + 0.0136vw), 1.25rem)}
.text-fluid-xl{font-size:clamp(1.25rem, calc(1.1522rem + 0.0272vw), 1.5rem)}
.text-fluid-2xl{font-size:clamp(1.5rem, calc(1.3533rem + 0.0408vw), 1.875rem)}
.text-fluid-3xl{font-size:clamp(1.875rem, calc(1.7283rem + 0.0408vw), 2.25rem)}
.text-fluid-4xl{font-size:clamp(2.25rem, calc(1.9565rem + 0.0815vw), 3rem)}
.text-fluid-5xl{font-size:clamp(3rem, calc(2.7065rem + 0.0815vw), 3.75rem)}
.text-fluid-6xl{font-size:clamp(3.75rem, calc(3.4565rem + 0.0815vw), 4.5rem)}
.text-fluid-7xl{font-size:clamp(4.5rem, calc(3.913rem + 0.163vw), 6rem)}
.text-fluid-8xl{font-size:clamp(6rem, calc(5.2174rem + 0.2174vw), 8rem)}
.text-fluid-9xl{font-size:clamp(8rem, calc(7.2174rem + 0.2174vw), 10rem)}

/* WHITESPACE */
.ws-normal   { white-space: normal; }
.ws-nowrap   { white-space: nowrap; }
.ws-pre      { white-space: pre; }
.ws-pre-line { white-space: pre-line; }
.ws-pre-wrap { white-space: pre-wrap; }  

/* Line-height named utilities */
.leading-none{line-height:0.8}
.leading-100{line-height:1}
.leading-105{line-height:1.05}
.leading-110{line-height:1.1}
.leading-115{line-height:1.15}
.leading-120{line-height:1.2}
.leading-125{line-height:1.25}
.leading-130{line-height:1.3}
.leading-135{line-height:1.35}
.leading-140{line-height:1.4}
.leading-145{line-height:1.45}
.leading-150{line-height:1.5}
.leading-160{line-height:1.6}
.leading-175{line-height:1.75}
.leading-200{line-height:2}
.leading-205{line-height:2.05}
.leading-210{line-height:2.1}
.leading-215{line-height:2.15}
.leading-220{line-height:2.2}
.leading-225{line-height:2.25}
.leading-230{line-height:2.3}
.leading-235{line-height:2.35}
.leading-240{line-height:2.4}
.leading-245{line-height:2.45}
.leading-250{line-height:2.5}
.leading-255{line-height:2.55}
.leading-260{line-height:2.6}
.leading-265{line-height:2.65}
.leading-270{line-height:2.7}
.leading-275{line-height:2.75}
.leading-280{line-height:2.8}
.leading-285{line-height:2.85}
.leading-290{line-height:2.9}
.leading-295{line-height:2.95}
.leading-300{line-height:3}
.leading-305{line-height:3.05}
.leading-310{line-height:3.1}
.leading-315{line-height:3.15}
.leading-320{line-height:3.2}
.leading-325{line-height:3.25}
.leading-330{line-height:3.3}
.leading-335{line-height:3.35}
.leading-340{line-height:3.4}
.leading-345{line-height:3.45}
.leading-350{line-height:3.5}
.leading-355{line-height:3.55}
.leading-360{line-height:3.6}
.leading-365{line-height:3.65}
.leading-370{line-height:3.7}
.leading-375{line-height:3.75}
.leading-380{line-height:3.8}
.leading-385{line-height:3.85}
.leading-390{line-height:3.9}
.leading-395{line-height:3.95}
.leading-400{line-height:4}

/* Named letter-spacing utilities */
.tracking-none   { letter-spacing: 0 }
.tracking-light  { letter-spacing: 0.02em }
.tracking-wide   { letter-spacing: 0.08em }
.tracking-wider  { letter-spacing: 0.15em }
.tracking-widest { letter-spacing: 0.3em }

/* FONT WEIGHT */
.weight-100{font-weight:100;}
.weight-200{font-weight:200;}
.weight-300{font-weight:300;}
.weight-400{font-weight:400;}
.weight-500{font-weight:500;}
.weight-600{font-weight:600;}
.weight-700{font-weight:700;}
.weight-800{font-weight:800;}
.weight-900{font-weight:900;}

.text-underline{text-decoration:underline;}
.text-no-underline{text-decoration:none;}
.text-overline{text-decoration:overline;}
.text-line-through{text-decoration:line-through;}

.lowercase{text-transform:lowercase;}
.capitalize{text-transform:capitalize;}
.uppercase{text-transform:uppercase;}
.normal-case{text-transform:none;}
.decoration-none {text-decoration: none;}

.text-italic{font-style:italic;}
.text-no-italic{font-style:normal;}

.text-left { text-align: left }
.text-center { text-align: center }
.text-right { text-align: right }
.text-justify { text-align: justify }

.text-start { text-align: start }
.text-end { text-align: end }

/* WIDTH */

.w-full { width: 100% }
.w-screen { width: 100vw }
.w-0 { width: 0 }
.w-px { width: 1px }
.w-10 { width: 10% }
.w-15 { width: 15% }
.w-20 { width: 20% }
.w-25 { width: 25% }
.w-30 { width: 30% }
.w-33 { width: 33.333% }
.w-40 { width: 40% }
.w-50 { width: 50% }
.w-60 { width: 60% }
.w-66 { width: 66.666% }
.w-70 { width: 70% }
.w-75 { width: 75% }
.w-80 { width: 80% }
.w-90 { width: 90% }
.w-100 { width: 100% }
.w-1_2 { width: 50% }
.w-1_3 { width: 33.333% }
.w-2_3 { width: 66.666% }
.w-1_4 { width: 25% }
.w-3_4 { width: 75% }
.w-auto { width: auto }
.w-min { width: min-content }
.w-max { width: max-content }
.w-fit { width: fit-content }
.w-svw { width: 100svw }

.w-vw-5 { width: 5vw }
.w-vw-10 { width: 10vw }
.w-vw-20 { width: 20vw }
.w-vw-25 { width: 25vw }
.w-vw-30 { width: 30vw }
.w-vw-33 { width: 33.333vw }
.w-vw-40 { width: 40vw }
.w-vw-50 { width: 50vw }
.w-vw-60 { width: 60vw }
.w-vw-66 { width: 66.666vw }
.w-vw-70 { width: 70vw }
.w-vw-75 { width: 75vw }
.w-vw-80 { width: 80vw }
.w-vw-90 { width: 90vw }
.w-vw-100 { width: 100vw }

/* MIN */
.min-w-5 { min-width: 5% }
.min-w-10 { min-width: 10% }
.min-w-15 { min-width: 15% }
.min-w-20 { min-width: 20% }
.min-w-25 { min-width: 25% }
.min-w-30 { min-width: 30% }
.min-w-33 { min-width: 33.333% }
.min-w-40 { min-width: 40% }
.min-w-50 { min-width: 50% }
.min-w-60 { min-width: 60% }
.min-w-66 { min-width: 66.666% }
.min-w-70 { min-width: 70% }
.min-w-75 { min-width: 75% }
.min-w-80 { min-width: 80% }
.min-w-90 { min-width: 90% }
.min-w-100 { min-width: 100% }
.min-w-1_2 { min-width: 50% }
.min-w-1_3 { min-width: 33.333% }
.min-w-2_3 { min-width: 66.666% }
.min-w-1_4 { min-width: 25% }
.min-w-3_4 { min-width: 75% }
.min-w-auto { min-width: auto }
.min-w-min { min-width: min-content }
.min-w-max { min-width: max-content }
.min-w-fit { min-width: fit-content }
.min-w-vw-5 { min-width: 5vw }
.min-w-vw-10 { min-width: 10vw }
.min-w-vw-20 { min-width: 20vw }
.min-w-vw-25 { min-width: 25vw }
.min-w-vw-30 { min-width: 30vw }
.min-w-vw-33 { min-width: 33.333vw }
.min-w-vw-40 { min-width: 40vw }
.min-w-vw-50 { min-width: 50vw }
.min-w-vw-60 { min-width: 60vw }
.min-w-vw-66 { min-width: 66.666vw }
.min-w-vw-70 { min-width: 70vw }
.min-w-vw-75 { min-width: 75vw }
.min-w-vw-80 { min-width: 80vw }
.min-w-vw-90 { min-width: 90vw }
.min-w-vw-100 { min-width: 100vw }
.max-w-5 { max-width: 5% }
.max-w-10 { max-width: 10% }
.max-w-15 { max-width: 15% }
.max-w-20 { max-width: 20% }
.max-w-25 { max-width: 25% }
.max-w-30 { max-width: 30% }
.max-w-33 { max-width: 33.333% }
.max-w-40 { max-width: 40% }
.max-w-50 { max-width: 50% }
.max-w-60 { max-width: 60% }
.max-w-66 { max-width: 66.666% }
.max-w-70 { max-width: 70% }
.max-w-75 { max-width: 75% }
.max-w-80 { max-width: 80% }
.max-w-90 { max-width: 90% }
.max-w-100 { max-width: 100% }
.max-w-1_2 { max-width: 50% }
.max-w-1_3 { max-width: 33.333% }
.max-w-2_3 { max-width: 66.666% }
.max-w-1_4 { max-width: 25% }
.max-w-3_4 { max-width: 75% }
.max-w-auto {max-width:auto;}
.max-w-none { max-width: none }
.max-w-min { max-width: min-content }
.max-w-max { max-width: max-content }
.max-w-fit { max-width: fit-content }
.max-w-vw-5 { max-width: 5vw }
.max-w-vw-10 { max-width: 10vw }
.max-w-vw-15 { max-width: 15vw }
.max-w-vw-20 { max-width: 20vw }
.max-w-vw-25 { max-width: 25vw }
.max-w-vw-30 { max-width: 30vw }
.max-w-vw-33 { max-width: 33.333vw }
.max-w-vw-40 { max-width: 40vw }
.max-w-vw-50 { max-width: 50vw }
.max-w-vw-60 { max-width: 60vw }
.max-w-vw-66 { max-width: 66.666vw }
.max-w-vw-70 { max-width: 70vw }
.max-w-vw-75 { max-width: 75vw }
.max-w-vw-80 { max-width: 80vw }
.max-w-vw-90 { max-width: 90vw }
.max-w-vw-100 { max-width: 100vw }

.w-0px { width: 0px }
.w-10px { width: 10px }
.w-20px { width: 20px }
.w-30px { width: 30px }
.w-40px { width: 40px }
.w-50px { width: 50px }
.w-100px { width: 100px }
.w-125px { width: 125px }
.w-150px { width: 150px }
.w-175px { width: 175px }
.w-200px { width: 200px }
.w-240px { width: 240px }
.w-300px { width: 300px }
.w-400px { width: 400px }
.w-500px { width: 500px }
.w-600px { width: 600px }
.w-800px { width: 800px }
.w-1000px { width: 1000px }
.w-1200px { width: 1200px }
.w-1400px { width: 1400px }

.max-w-0px { max-width: 0px }
.max-w-20px { max-width: 20px }
.max-w-30px { max-width: 30px }
.max-w-40px { max-width: 40px }
.max-w-50px { max-width: 50px }
.max-w-100px { max-width: 100px }
.max-w-125px { max-width: 125px }
.max-w-150px { max-width: 150px }
.max-w-175px { max-width: 175px }
.max-w-200px { max-width: 200px }
.max-w-300px { max-width: 300px }
.max-w-400px { max-width: 400px }
.max-w-500px { max-width: 500px }
.max-w-600px { max-width: 600px }
.max-w-800px { max-width: 800px }
.max-w-1000px { max-width: 1000px }
.max-w-1200px { max-width: 1200px }
.max-w-1400px { max-width: 1400px }

.min-w-0px { min-width: 0px }
.min-w-20px { min-width: 20px }
.min-w-30px { min-width: 30px }
.min-w-40px { min-width: 40px }
.min-w-50px { min-width: 50px }
.min-w-100px { min-width: 100px }
.min-w-125px { min-width: 125px }
.min-w-150px { min-width: 150px }
.min-w-175px { min-width: 175px }
.min-w-200px { min-width: 200px }
.min-w-300px { min-width: 300px }
.min-w-400px { min-width: 400px }
.min-w-500px { min-width: 500px }
.min-w-600px { min-width: 600px }
.min-w-800px { min-width: 800px }
.min-w-1000px { min-width: 1000px }
.min-w-1200px { min-width: 1200px }
.min-w-1400px { min-width: 1400px }

/* UNSET */
.w-unset { width: unset; }
.min-w-unset { min-width: unset; }
.max-w-unset { max-width: unset; }

/* GRID */
.fullgrid-20  { width: calc(100% - 20px); }
.fullgrid-40  { width: calc(100% - 40px); }
.fullgrid-60  { width: calc(100% - 60px); }
.fullgrid-80  { width: calc(100% - 80px); }
.fullgrid-100 { width: calc(100% - 100px); }
.fullgrid-120 { width: calc(100% - 120px); }
.fullgrid-140 { width: calc(100% - 140px); }
.fullgrid-160 { width: calc(100% - 160px); }
.fullgrid-180 { width: calc(100% - 180px); }
.fullgrid-200 { width: calc(100% - 200px); }
.fullgrid-220 { width: calc(100% - 220px); }
.fullgrid-240 { width: calc(100% - 240px); }

.grid-800  { width: 800px; }
.grid-1000 { width: 1000px; }
.grid-1100 { width: 1100px; }
.grid-1200 { width: 1200px; }
.grid-1400 { width: 1400px; }
.grid-1600 { width: 1600px; }

.fullgrid-20,
.fullgrid-40,
.fullgrid-60,
.fullgrid-80,
.fullgrid-100,
.fullgrid-120,
.fullgrid-140,
.fullgrid-160,
.fullgrid-180,
.fullgrid-200,
.fullgrid-220,
.fullgrid-240,
.grid-800,
.grid-1000,
.grid-1100,
.grid-1200,
.grid-1400,
.grid-1600 {margin: 0 auto;}

/* HEIGHT */
.h-5 { height: 5% }
.h-10 { height: 10% }
.h-15 { height: 15% }
.h-20 { height: 20% }
.h-25 { height: 25% }
.h-30 { height: 30% }
.h-33 { height: 33.333% }
.h-40 { height: 40% }
.h-50 { height: 50% }
.h-60 { height: 60% }
.h-66 { height: 66.666% }
.h-70 { height: 70% }
.h-75 { height: 75% }
.h-80 { height: 80% }
.h-90 { height: 90% }
.h-100,.h-full { height: 100% }
.h-1_2 { height: 50% }
.h-1_3 { height: 33.333% }
.h-2_3 { height: 66.666% }
.h-1_4 { height: 25% }
.h-3_4 { height: 75% }
.h-auto { height: auto }
.h-min { height: min-content }
.h-max { height: max-content }
.h-fit { height: fit-content }
.h-screen { height: 100vh }
.h-svh { height: 100svh }

.h-vw-5 { height: 5vw }
.h-vw-10 { height: 10vw }
.h-vw-15 { height: 15vw }
.h-vw-20 { height: 20vw }
.h-vw-25 { height: 25vw }
.h-vw-30 { height: 30vw }
.h-vw-33 { height: 33.333vw }
.h-vw-40 { height: 40vw }
.h-vw-50 { height: 50vw }
.h-vw-60 { height: 60vw }
.h-vw-66 { height: 66.666vw }
.h-vw-70 { height: 70vw }
.h-vw-75 { height: 75vw }
.h-vw-80 { height: 80vw }
.h-vw-90 { height: 90vw }
.h-vw-100 { height: 100vw }



/* MIN */
.min-h-5 { min-height: 5% }
.min-h-10 { min-height: 10% }
.min-h-15 { min-height: 15% }
.min-h-20 { min-height: 20% }
.min-h-25 { min-height: 25% }
.min-h-30 { min-height: 30% }
.min-h-33 { min-height: 33.333% }
.min-h-40 { min-height: 40% }
.min-h-50 { min-height: 50% }
.min-h-60 { min-height: 60% }
.min-h-66 { min-height: 66.666% }
.min-h-70 { min-height: 70% }
.min-h-75 { min-height: 75% }
.min-h-80 { min-height: 80% }
.min-h-90 { min-height: 90% }
.min-h-100 { min-height: 100% }
.min-h-1_2 { min-height: 50% }
.min-h-1_3 { min-height: 33.333% }
.min-h-2_3 { min-height: 66.666% }
.min-h-1_4 { min-height: 25% }
.min-h-3_4 { min-height: 75% }
.min-h-auto { min-height: auto }
.min-h-min { min-height: min-content }
.min-h-max { min-height: max-content }
.min-h-fit { min-height: fit-content }
.min-h-screen { min-height: 100vh }
.min-h-svh { min-height: 100svh }

.min-h-vw-5 { min-height: 5vw }
.min-h-vw-10 { min-height: 10vw }
.min-h-vw-15 { min-height: 15vw }
.min-h-vw-20 { min-height: 20vw }
.min-h-vw-25 { min-height: 25vw }
.min-h-vw-30 { min-height: 30vw }
.min-h-vw-33 { min-height: 33.333vw }
.min-h-vw-40 { min-height: 40vw }
.min-h-vw-50 { min-height: 50vw }
.min-h-vw-60 { min-height: 60vw }
.min-h-vw-66 { min-height: 66.666vw }
.min-h-vw-70 { min-height: 70vw }
.min-h-vw-75 { min-height: 75vw }
.min-h-vw-80 { min-height: 80vw }
.min-h-vw-90 { min-height: 90vw }
.min-h-vw-100 { min-height: 100vw }

/* MAX */
.max-h-5 { max-height: 5% }
.max-h-10 { max-height: 10% }
.max-h-15 { max-height: 15% }
.max-h-20 { max-height: 20% }
.max-h-25 { max-height: 25% }
.max-h-30 { max-height: 30% }
.max-h-33 { max-height: 33.333% }
.max-h-40 { max-height: 40% }
.max-h-50 { max-height: 50% }
.max-h-60 { max-height: 60% }
.max-h-66 { max-height: 66.666% }
.max-h-70 { max-height: 70% }
.max-h-75 { max-height: 75% }
.max-h-80 { max-height: 80% }
.max-h-90 { max-height: 90% }
.max-h-100 { max-height: 100% }
.max-h-1_2 { max-height: 50% }
.max-h-1_3 { max-height: 33.333% }
.max-h-2_3 { max-height: 66.666% }
.max-h-1_4 { max-height: 25% }
.max-h-3_4 { max-height: 75% }
.max-h-auto { max-height: auto }
.max-h-none { max-height: none }
.max-h-min { max-height: min-content }
.max-h-max { max-height: max-content }
.max-h-fit { max-height: fit-content }
.max-h-screen { max-height: 100vh }
.max-h-svh { max-height: 100svh }

.max-h-vw-5 { max-height: 5vw }
.max-h-vw-10 { max-height: 10vw }
.max-h-vw-15 { max-height: 15vw }
.max-h-vw-20 { max-height: 20vw }
.max-h-vw-25 { max-height: 25vw }
.max-h-vw-30 { max-height: 30vw }
.max-h-vw-33 { max-height: 33.333vw }
.max-h-vw-40 { max-height: 40vw }
.max-h-vw-50 { max-height: 50vw }
.max-h-vw-60 { max-height: 60vw }
.max-h-vw-66 { max-height: 66.666vw }
.max-h-vw-70 { max-height: 70vw }
.max-h-vw-75 { max-height: 75vw }
.max-h-vw-80 { max-height: 80vw }
.max-h-vw-90 { max-height: 90vw }
.max-h-vw-100 { max-height: 100vw }


.h-0px { height: 0px }
.h-10px { height: 10px }
.h-20px { height: 20px }
.h-30px { height: 30px }
.h-40px { height: 40px }
.h-50px { height: 50px }
.h-100px { height: 100px }
.h-125px { height: 125px }
.h-150px { height: 150px }
.h-175px { height: 175px }
.h-200px { height: 200px }
.h-240px { height: 240px }
.h-300px { height: 300px }
.h-400px { height: 400px }
.h-500px { height: 500px }
.h-600px { height: 600px }
.h-800px { height: 800px }
.h-1000px { height: 1000px }
.h-1200px { height: 1200px }
.h-1400px { height: 1400px }

.min-h-0px { min-height: 0px }
.min-h-20px { min-height: 20px }
.min-h-30px { min-height: 30px }
.min-h-40px { min-height: 40px }
.min-h-50px { min-height: 50px }
.min-h-100px { min-height: 100px }
.min-h-125px { min-height: 125px }
.min-h-150px { min-height: 150px }
.min-h-175px { min-height: 175px }
.min-h-200px { min-height: 200px }
.min-h-300px { min-height: 300px }
.min-h-400px { min-height: 400px }
.min-h-500px { min-height: 500px }
.min-h-600px { min-height: 600px }
.min-h-800px { min-height: 800px }
.min-h-1000px { min-height: 1000px }
.min-h-1200px { min-height: 1200px }
.min-h-1400px { min-height: 1400px }

.max-h-0px { max-height: 0px }
.max-h-20px { max-height: 20px }
.max-h-30px { max-height: 30px }
.max-h-40px { max-height: 40px }
.max-h-50px { max-height: 50px }
.max-h-100px { max-height: 100px }
.max-h-125px { max-height: 125px }
.max-h-150px { max-height: 150px }
.max-h-175px { max-height: 175px }
.max-h-200px { max-height: 200px }
.max-h-300px { max-height: 300px }
.max-h-400px { max-height: 400px }
.max-h-500px { max-height: 500px }
.max-h-600px { max-height: 600px }
.max-h-800px { max-height: 800px }
.max-h-1000px { max-height: 1000px }
.max-h-1200px { max-height: 1200px }
.max-h-1400px { max-height: 1400px }

.grid { display: grid; }

/* GAP (for flex and grid) */
.gap-0  { gap: 0; }
.gap-1  { gap: 1rem; }
.gap-2  { gap: 2rem; }
.gap-3  { gap: 3rem; }
.gap-4  { gap: 4rem; }
.gap-5  { gap: 5rem; }
.gap-6  { gap: 6rem; }
.gap-7  { gap: 7rem; }
.gap-8  { gap: 8rem; }
.gap-9  { gap: 9rem; }
.gap-10 { gap: 10rem; }

/* GAP X (column-gap) */
.gap-x-0  { column-gap: 0; }
.gap-x-1  { column-gap: 1rem; }
.gap-x-2  { column-gap: 2rem; }
.gap-x-3  { column-gap: 3rem; }
.gap-x-4  { column-gap: 4rem; }
.gap-x-5  { column-gap: 5rem; }
.gap-x-6  { column-gap: 6rem; }
.gap-x-7  { column-gap: 7rem; }
.gap-x-8  { column-gap: 8rem; }
.gap-x-9  { column-gap: 9rem; }
.gap-x-10 { column-gap: 10rem; }

/* GAP Y (row-gap) */
.gap-y-0  { row-gap: 0; }
.gap-y-1  { row-gap: 1rem; }
.gap-y-2  { row-gap: 2rem; }
.gap-y-3  { row-gap: 3rem; }
.gap-y-4  { row-gap: 4rem; }
.gap-y-5  { row-gap: 5rem; }
.gap-y-6  { row-gap: 6rem; }
.gap-y-7  { row-gap: 7rem; }
.gap-y-8  { row-gap: 8rem; }
.gap-y-9  { row-gap: 9rem; }
.gap-y-10 { row-gap: 10rem; }

/* DISPLAY BASE */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-grid { display: inline-grid; }

/* FLEX BASE */
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.flex-row{flex-direction:row;}
.flex-row-reverse{flex-direction:row-reverse;}
.flex-col{flex-direction:column;}
.flex-col-reverse{flex-direction:column-reverse;}
.flex-wrap{flex-wrap:wrap;}
.flex-wrap-reverse{flex-wrap:wrap-reverse;}
.flex-nowrap{flex-wrap:nowrap;}
.flex-1{flex:1 1 0%;}
.flex-auto{flex:1 1 auto;}
.flex-initial{flex:0 1 auto;}
.flex-none{flex:none;}

/* GRID ALIGNMENT (grid only) */
.justify-items-start{justify-items:start;}
.justify-items-end{justify-items:end;}
.justify-items-center{justify-items:center;}
.justify-items-stretch{justify-items:stretch;}

.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;}

/* SHARED ALIGNMENT (flex or grid) */
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}
.items-center{align-items:center;}
.items-baseline{align-items:baseline;}
.items-stretch{align-items:stretch;}

.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;}

.content-start{align-content:flex-start;}
.content-end{align-content:flex-end;}
.content-center{align-content:center;}
.content-between{align-content:space-between;}
.content-around{align-content:space-around;}
.content-evenly{align-content:space-evenly;}

.self-auto{align-self:auto;}
.self-start{align-self:flex-start;}
.self-end{align-self:flex-end;}
.self-center{align-self:center;}
.self-stretch{align-self:stretch;}

/* FLEX ITEM SIZING */
.order-none{order:0;}
.order-1{order:1;}
.order-2{order:2;}
.order-3{order:3;}
.order-4{order:4;}
.order-5{order:5;}
.order-6{order:6;}

.basis-0{flex-basis:0;}
.basis-auto{flex-basis:auto;}
.basis-full{flex-basis:100%;}
.basis-max{flex-basis:max-content;}
.basis-min{flex-basis:min-content;}
.basis-fit{flex-basis:fit-content;}

.shrink-0{flex-shrink:0;}
.shrink{flex-shrink:1;}

.grow-0{flex-grow:0;}
.grow{flex-grow:1;}

/* MARGIN */
.m-0 { margin: 0; }
.m-025 { margin: 0.25rem; }
.m-05 { margin: .5rem; }
.m-1 { margin: 1rem; }
.m-2 { margin: 2rem; }
.m-3 { margin: 3rem; }
.m-4 { margin: 4rem; }
.m-5 { margin: 5rem; }
.m-6 { margin: 6rem; }
.m-7 { margin: 7rem; }
.m-8 { margin: 8rem; }
.m-9 { margin: 9rem; }
.m-10 { margin: 10rem; }
.m-11 { margin: 11rem; }
.m-12 { margin: 12rem; }
.m-13 { margin: 13rem; }
.m-14 { margin: 14rem; }
.m-15 { margin: 15rem; }
.m-16 { margin: 16rem; }
.m-17 { margin: 17rem; }
.m-18 { margin: 18rem; }
.m-19 { margin: 19rem; }
.m-20 { margin: 20rem; }
.m-21 { margin: 21rem; }
.m-22 { margin: 22rem; }
.m-23 { margin: 23rem; }
.m-24 { margin: 24rem; }
.m-25 { margin: 25rem; }
.m-26 { margin: 26rem; }
.m-27 { margin: 27rem; }
.m-28 { margin: 28rem; }
.m-29 { margin: 29rem; }
.m-30 { margin: 30rem; }
.m-auto { margin: auto; }

/* MARGIN X (left + right) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-025 { margin-left: .25rem; margin-right: .25rem; }
.mx-05 { margin-left: .5rem; margin-right: .5rem; }
.mx-1 { margin-left: 1rem; margin-right: 1rem; }
.mx-2 { margin-left: 2rem; margin-right: 2rem; }
.mx-3 { margin-left: 3rem; margin-right: 3rem; }
.mx-4 { margin-left: 4rem; margin-right: 4rem; }
.mx-5 { margin-left: 5rem; margin-right: 5rem; }
.mx-6 { margin-left: 6rem; margin-right: 6rem; }
.mx-7 { margin-left: 7rem; margin-right: 7rem; }
.mx-8 { margin-left: 8rem; margin-right: 8rem; }
.mx-9 { margin-left: 9rem; margin-right: 9rem; }
.mx-10 { margin-left: 10rem; margin-right: 10rem; }
.mx-11 { margin-left: 11rem; margin-right: 11rem; }
.mx-12 { margin-left: 12rem; margin-right: 12rem; }
.mx-13 { margin-left: 13rem; margin-right: 13rem; }
.mx-14 { margin-left: 14rem; margin-right: 14rem; }
.mx-15 { margin-left: 15rem; margin-right: 15rem; }
.mx-16 { margin-left: 16rem; margin-right: 16rem; }
.mx-17 { margin-left: 17rem; margin-right: 17rem; }
.mx-18 { margin-left: 18rem; margin-right: 18rem; }
.mx-19 { margin-left: 19rem; margin-right: 19rem; }
.mx-20 { margin-left: 20rem; margin-right: 20rem; }
.mx-21 { margin-left: 21rem; margin-right: 21rem; }
.mx-22 { margin-left: 22rem; margin-right: 22rem; }
.mx-23 { margin-left: 23rem; margin-right: 23rem; }
.mx-24 { margin-left: 24rem; margin-right: 24rem; }
.mx-25 { margin-left: 25rem; margin-right: 25rem; }
.mx-26 { margin-left: 26rem; margin-right: 26rem; }
.mx-27 { margin-left: 27rem; margin-right: 27rem; }
.mx-28 { margin-left: 28rem; margin-right: 28rem; }
.mx-29 { margin-left: 29rem; margin-right: 29rem; }
.mx-30 { margin-left: 30rem; margin-right: 30rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* MARGIN Y (top + bottom) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-025 { margin-top: .25rem; }
.my-05 { margin-top: .5rem; }
.my-1 { margin-top: 1rem; margin-bottom: 1rem; }
.my-2 { margin-top: 2rem; margin-bottom: 2rem; }
.my-3 { margin-top: 3rem; margin-bottom: 3rem; }
.my-4 { margin-top: 4rem; margin-bottom: 4rem; }
.my-5 { margin-top: 5rem; margin-bottom: 5rem; }
.my-6 { margin-top: 6rem; margin-bottom: 6rem; }
.my-7 { margin-top: 7rem; margin-bottom: 7rem; }
.my-8 { margin-top: 8rem; margin-bottom: 8rem; }
.my-9 { margin-top: 9rem; margin-bottom: 9rem; }
.my-10 { margin-top: 10rem; margin-bottom: 10rem; }
.my-11 { margin-top: 11rem; margin-bottom: 11rem; }
.my-12 { margin-top: 12rem; margin-bottom: 12rem; }
.my-13 { margin-top: 13rem; margin-bottom: 13rem; }
.my-14 { margin-top: 14rem; margin-bottom: 14rem; }
.my-15 { margin-top: 15rem; margin-bottom: 15rem; }
.my-16 { margin-top: 16rem; margin-bottom: 16rem; }
.my-17 { margin-top: 17rem; margin-bottom: 17rem; }
.my-18 { margin-top: 18rem; margin-bottom: 18rem; }
.my-19 { margin-top: 19rem; margin-bottom: 19rem; }
.my-20 { margin-top: 20rem; margin-bottom: 20rem; }
.my-21 { margin-top: 21rem; margin-bottom: 21rem; }
.my-22 { margin-top: 22rem; margin-bottom: 22rem; }
.my-23 { margin-top: 23rem; margin-bottom: 23rem; }
.my-24 { margin-top: 24rem; margin-bottom: 24rem; }
.my-25 { margin-top: 25rem; margin-bottom: 25rem; }
.my-26 { margin-top: 26rem; margin-bottom: 26rem; }
.my-27 { margin-top: 27rem; margin-bottom: 27rem; }
.my-28 { margin-top: 28rem; margin-bottom: 28rem; }
.my-29 { margin-top: 29rem; margin-bottom: 29rem; }
.my-30 { margin-top: 30rem; margin-bottom: 30rem; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* --- MARGIN TOP --- */
.mt-0 { margin-top: 0; }
.mt-025 { margin-top: .25rem; }
.mt-05 { margin-top: .5rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.mt-5 { margin-top: 5rem; }
.mt-6 { margin-top: 6rem; }
.mt-7 { margin-top: 7rem; }
.mt-8 { margin-top: 8rem; }
.mt-9 { margin-top: 9rem; }
.mt-10 { margin-top: 10rem; }
.mt-11 { margin-top: 11rem; }
.mt-12 { margin-top: 12rem; }
.mt-13 { margin-top: 13rem; }
.mt-14 { margin-top: 14rem; }
.mt-15 { margin-top: 15rem; }
.mt-16 { margin-top: 16rem; }
.mt-17 { margin-top: 17rem; }
.mt-18 { margin-top: 18rem; }
.mt-19 { margin-top: 19rem; }
.mt-20 { margin-top: 20rem; }
.mt-21 { margin-top: 21rem; }
.mt-22 { margin-top: 22rem; }
.mt-23 { margin-top: 23rem; }
.mt-24 { margin-top: 24rem; }
.mt-25 { margin-top: 25rem; }
.mt-26 { margin-top: 26rem; }
.mt-27 { margin-top: 27rem; }
.mt-28 { margin-top: 28rem; }
.mt-29 { margin-top: 29rem; }
.mt-30 { margin-top: 30rem; }
.mt-auto { margin-top: auto; }

/* --- MARGIN RIGHT --- */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 1rem; }
.mr-2 { margin-right: 2rem; }
.mr-3 { margin-right: 3rem; }
.mr-4 { margin-right: 4rem; }
.mr-5 { margin-right: 5rem; }
.mr-6 { margin-right: 6rem; }
.mr-7 { margin-right: 7rem; }
.mr-8 { margin-right: 8rem; }
.mr-9 { margin-right: 9rem; }
.mr-10 { margin-right: 10rem; }
.mr-11 { margin-right: 11rem; }
.mr-12 { margin-right: 12rem; }
.mr-13 { margin-right: 13rem; }
.mr-14 { margin-right: 14rem; }
.mr-15 { margin-right: 15rem; }
.mr-16 { margin-right: 16rem; }
.mr-17 { margin-right: 17rem; }
.mr-18 { margin-right: 18rem; }
.mr-19 { margin-right: 19rem; }
.mr-20 { margin-right: 20rem; }
.mr-21 { margin-right: 21rem; }
.mr-22 { margin-right: 22rem; }
.mr-23 { margin-right: 23rem; }
.mr-24 { margin-right: 24rem; }
.mr-25 { margin-right: 25rem; }
.mr-26 { margin-right: 26rem; }
.mr-27 { margin-right: 27rem; }
.mr-28 { margin-right: 28rem; }
.mr-29 { margin-right: 29rem; }
.mr-30 { margin-right: 30rem; }
.mr-auto { margin-right: auto; }

/* --- MARGIN BOTTOM --- */
.mb-0 { margin-bottom: 0; }
.mb-025 { margin-bottom: .25rem; }
.mb-05 { margin-bottom: .5rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }
.mb-5 { margin-bottom: 5rem; }
.mb-6 { margin-bottom: 6rem; }
.mb-7 { margin-bottom: 7rem; }
.mb-8 { margin-bottom: 8rem; }
.mb-9 { margin-bottom: 9rem; }
.mb-10 { margin-bottom: 10rem; }
.mb-11 { margin-bottom: 11rem; }
.mb-12 { margin-bottom: 12rem; }
.mb-13 { margin-bottom: 13rem; }
.mb-14 { margin-bottom: 14rem; }
.mb-15 { margin-bottom: 15rem; }
.mb-16 { margin-bottom: 16rem; }
.mb-17 { margin-bottom: 17rem; }
.mb-18 { margin-bottom: 18rem; }
.mb-19 { margin-bottom: 19rem; }
.mb-20 { margin-bottom: 20rem; }
.mb-21 { margin-bottom: 21rem; }
.mb-22 { margin-bottom: 22rem; }
.mb-23 { margin-bottom: 23rem; }
.mb-24 { margin-bottom: 24rem; }
.mb-25 { margin-bottom: 25rem; }
.mb-26 { margin-bottom: 26rem; }
.mb-27 { margin-bottom: 27rem; }
.mb-28 { margin-bottom: 28rem; }
.mb-29 { margin-bottom: 29rem; }
.mb-30 { margin-bottom: 30rem; }
.mb-auto { margin-bottom: auto; }

/* --- MARGIN LEFT --- */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 1rem; }
.ml-2 { margin-left: 2rem; }
.ml-3 { margin-left: 3rem; }
.ml-4 { margin-left: 4rem; }
.ml-5 { margin-left: 5rem; }
.ml-6 { margin-left: 6rem; }
.ml-7 { margin-left: 7rem; }
.ml-8 { margin-left: 8rem; }
.ml-9 { margin-left: 9rem; }
.ml-10 { margin-left: 10rem; }
.ml-11 { margin-left: 11rem; }
.ml-12 { margin-left: 12rem; }
.ml-13 { margin-left: 13rem; }
.ml-14 { margin-left: 14rem; }
.ml-15 { margin-left: 15rem; }
.ml-16 { margin-left: 16rem; }
.ml-17 { margin-left: 17rem; }
.ml-18 { margin-left: 18rem; }
.ml-19 { margin-left: 19rem; }
.ml-20 { margin-left: 20rem; }
.ml-21 { margin-left: 21rem; }
.ml-22 { margin-left: 22rem; }
.ml-23 { margin-left: 23rem; }
.ml-24 { margin-left: 24rem; }
.ml-25 { margin-left: 25rem; }
.ml-26 { margin-left: 26rem; }
.ml-27 { margin-left: 27rem; }
.ml-28 { margin-left: 28rem; }
.ml-29 { margin-left: 29rem; }
.ml-30 { margin-left: 30rem; }
.ml-auto { margin-left: auto; }

/* --- PADDING ALL --- */
.p-0 { padding: 0; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }
.p-4 { padding: 4rem; }
.p-5 { padding: 5rem; }
.p-6 { padding: 6rem; }
.p-7 { padding: 7rem; }
.p-8 { padding: 8rem; }
.p-9 { padding: 9rem; }
.p-10 { padding: 10rem; }
.p-11 { padding: 11rem; }
.p-12 { padding: 12rem; }
.p-13 { padding: 13rem; }
.p-14 { padding: 14rem; }
.p-15 { padding: 15rem; }
.p-16 { padding: 16rem; }
.p-17 { padding: 17rem; }
.p-18 { padding: 18rem; }
.p-19 { padding: 19rem; }
.p-20 { padding: 20rem; }
.p-21 { padding: 21rem; }
.p-22 { padding: 22rem; }
.p-23 { padding: 23rem; }
.p-24 { padding: 24rem; }
.p-25 { padding: 25rem; }
.p-26 { padding: 26rem; }
.p-27 { padding: 27rem; }
.p-28 { padding: 28rem; }
.p-29 { padding: 29rem; }
.p-30 { padding: 30rem; }

/* --- PADDING TOP --- */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 1rem; }
.pt-2 { padding-top: 2rem; }
.pt-3 { padding-top: 3rem; }
.pt-4 { padding-top: 4rem; }
.pt-5 { padding-top: 5rem; }
.pt-6 { padding-top: 6rem; }
.pt-7 { padding-top: 7rem; }
.pt-8 { padding-top: 8rem; }
.pt-9 { padding-top: 9rem; }
.pt-10 { padding-top: 10rem; }
.pt-11 { padding-top: 11rem; }
.pt-12 { padding-top: 12rem; }
.pt-13 { padding-top: 13rem; }
.pt-14 { padding-top: 14rem; }
.pt-15 { padding-top: 15rem; }
.pt-16 { padding-top: 16rem; }
.pt-17 { padding-top: 17rem; }
.pt-18 { padding-top: 18rem; }
.pt-19 { padding-top: 19rem; }
.pt-20 { padding-top: 20rem; }
.pt-21 { padding-top: 21rem; }
.pt-22 { padding-top: 22rem; }
.pt-23 { padding-top: 23rem; }
.pt-24 { padding-top: 24rem; }
.pt-25 { padding-top: 25rem; }
.pt-26 { padding-top: 26rem; }
.pt-27 { padding-top: 27rem; }
.pt-28 { padding-top: 28rem; }
.pt-29 { padding-top: 29rem; }
.pt-30 { padding-top: 30rem; }

.pt-5p { padding-top:5%; }
.pt-10p { padding-top:10%; }
.pt-20p { padding-top:20%; }
.pt-30p { padding-top:30%; }
.pt-40p { padding-top:40%; }
.pt-50p { padding-top:50%; }
.pt-60p { padding-top:60%; }
.pt-70p { padding-top:70%; }
.pt-80p { padding-top:80%; }
.pt-90p { padding-top:90%; }
.pt-100p { padding-top:100%; }
.pt-120p { padding-top:120%; }
.pt-150p { padding-top:150%; }

/* --- PADDING BOTTOM --- */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }
.pb-3 { padding-bottom: 3rem; }
.pb-4 { padding-bottom: 4rem; }
.pb-5 { padding-bottom: 5rem; }
.pb-6 { padding-bottom: 6rem; }
.pb-7 { padding-bottom: 7rem; }
.pb-8 { padding-bottom: 8rem; }
.pb-9 { padding-bottom: 9rem; }
.pb-10 { padding-bottom: 10rem; }
.pb-11 { padding-bottom: 11rem; }
.pb-12 { padding-bottom: 12rem; }
.pb-13 { padding-bottom: 13rem; }
.pb-14 { padding-bottom: 14rem; }
.pb-15 { padding-bottom: 15rem; }
.pb-16 { padding-bottom: 16rem; }
.pb-17 { padding-bottom: 17rem; }
.pb-18 { padding-bottom: 18rem; }
.pb-19 { padding-bottom: 19rem; }
.pb-20 { padding-bottom: 20rem; }
.pb-21 { padding-bottom: 21rem; }
.pb-22 { padding-bottom: 22rem; }
.pb-23 { padding-bottom: 23rem; }
.pb-24 { padding-bottom: 24rem; }
.pb-25 { padding-bottom: 25rem; }
.pb-26 { padding-bottom: 26rem; }
.pb-27 { padding-bottom: 27rem; }
.pb-28 { padding-bottom: 28rem; }
.pb-29 { padding-bottom: 29rem; }
.pb-30 { padding-bottom: 30rem; }

.pb-5p { padding-bottom:5%; }
.pb-10p { padding-bottom:10%; }
.pb-20p { padding-bottom:20%; }
.pb-30p { padding-bottom:30%; }
.pb-40p { padding-bottom:40%; }
.pb-50p { padding-bottom:50%; }
.pb-60p { padding-bottom:60%; }
.pb-70p { padding-bottom:70%; }
.pb-80p { padding-bottom:80%; }
.pb-90p { padding-bottom:90%; }
.pb-100p { padding-bottom:100%; }
.pb-120p { padding-bottom:120%; }
.pb-150p { padding-bottom:150%; }

/* --- PADDING LEFT --- */
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 1rem; }
.pl-2 { padding-left: 2rem; }
.pl-3 { padding-left: 3rem; }
.pl-4 { padding-left: 4rem; }
.pl-5 { padding-left: 5rem; }
.pl-6 { padding-left: 6rem; }
.pl-7 { padding-left: 7rem; }
.pl-8 { padding-left: 8rem; }
.pl-9 { padding-left: 9rem; }
.pl-10 { padding-left: 10rem; }
.pl-11 { padding-left: 11rem; }
.pl-12 { padding-left: 12rem; }
.pl-13 { padding-left: 13rem; }
.pl-14 { padding-left: 14rem; }
.pl-15 { padding-left: 15rem; }
.pl-16 { padding-left: 16rem; }
.pl-17 { padding-left: 17rem; }
.pl-18 { padding-left: 18rem; }
.pl-19 { padding-left: 19rem; }
.pl-20 { padding-left: 20rem; }
.pl-21 { padding-left: 21rem; }
.pl-22 { padding-left: 22rem; }
.pl-23 { padding-left: 23rem; }
.pl-24 { padding-left: 24rem; }
.pl-25 { padding-left: 25rem; }
.pl-26 { padding-left: 26rem; }
.pl-27 { padding-left: 27rem; }
.pl-28 { padding-left: 28rem; }
.pl-29 { padding-left: 29rem; }
.pl-30 { padding-left: 30rem; }

.pl-5p { padding-left:5%; }
.pl-10p { padding-left:10%; }
.pl-20p { padding-left:20%; }
.pl-30p { padding-left:30%; }
.pl-40p { padding-left:40%; }
.pl-50p { padding-left:50%; }
.pl-60p { padding-left:60%; }
.pl-70p { padding-left:70%; }
.pl-80p { padding-left:80%; }
.pl-90p { padding-left:90%; }
.pl-100p { padding-left:100%; }
.pl-120p { padding-left:120%; }
.pl-150p { padding-left:150%; }

/* --- PADDING RIGHT --- */
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 1rem; }
.pr-2 { padding-right: 2rem; }
.pr-3 { padding-right: 3rem; }
.pr-4 { padding-right: 4rem; }
.pr-5 { padding-right: 5rem; }
.pr-6 { padding-right: 6rem; }
.pr-7 { padding-right: 7rem; }
.pr-8 { padding-right: 8rem; }
.pr-9 { padding-right: 9rem; }
.pr-10 { padding-right: 10rem; }
.pr-11 { padding-right: 11rem; }
.pr-12 { padding-right: 12rem; }
.pr-13 { padding-right: 13rem; }
.pr-14 { padding-right: 14rem; }
.pr-15 { padding-right: 15rem; }
.pr-16 { padding-right: 16rem; }
.pr-17 { padding-right: 17rem; }
.pr-18 { padding-right: 18rem; }
.pr-19 { padding-right: 19rem; }
.pr-20 { padding-right: 20rem; }
.pr-21 { padding-right: 21rem; }
.pr-22 { padding-right: 22rem; }
.pr-23 { padding-right: 23rem; }
.pr-24 { padding-right: 24rem; }
.pr-25 { padding-right: 25rem; }
.pr-26 { padding-right: 26rem; }
.pr-27 { padding-right: 27rem; }
.pr-28 { padding-right: 28rem; }
.pr-29 { padding-right: 29rem; }
.pr-30 { padding-right: 30rem; }

.pr-5p { padding-right:5%; }
.pr-10p { padding-right:10%; }
.pr-20p { padding-right:20%; }
.pr-30p { padding-right:30%; }
.pr-40p { padding-right:40%; }
.pr-50p { padding-right:50%; }
.pr-60p { padding-right:60%; }
.pr-70p { padding-right:70%; }
.pr-80p { padding-right:80%; }
.pr-90p { padding-right:90%; }
.pr-100p { padding-right:100%; }
.pr-120p { padding-right:120%; }
.pr-150p { padding-right:150%; }

/* --- PADDING X and Y --- */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 1rem; padding-right: 1rem; }
.px-2 { padding-left: 2rem; padding-right: 2rem; }
.px-3 { padding-left: 3rem; padding-right: 3rem; }
.px-4 { padding-left: 4rem; padding-right: 4rem; }
.px-5 { padding-left: 5rem; padding-right: 5rem; }
.px-6 { padding-left: 6rem; padding-right: 6rem; }
.px-7 { padding-left: 7rem; padding-right: 7rem; }
.px-8 { padding-left: 8rem; padding-right: 8rem; }
.px-9 { padding-left: 9rem; padding-right: 9rem; }
.px-10 { padding-left: 10rem; padding-right: 10rem; }
.px-11 { padding-left: 11rem; padding-right: 11rem; }
.px-12 { padding-left: 12rem; padding-right: 12rem; }
.px-13 { padding-left: 13rem; padding-right: 13rem; }
.px-14 { padding-left: 14rem; padding-right: 14rem; }
.px-15 { padding-left: 15rem; padding-right: 15rem; }
.px-16 { padding-left: 16rem; padding-right: 16rem; }
.px-17 { padding-left: 17rem; padding-right: 17rem; }
.px-18 { padding-left: 18rem; padding-right: 18rem; }
.px-19 { padding-left: 19rem; padding-right: 19rem; }
.px-20 { padding-left: 20rem; padding-right: 20rem; }
.px-21 { padding-left: 21rem; padding-right: 21rem; }
.px-22 { padding-left: 22rem; padding-right: 22rem; }
.px-23 { padding-left: 23rem; padding-right: 23rem; }
.px-24 { padding-left: 24rem; padding-right: 24rem; }
.px-25 { padding-left: 25rem; padding-right: 25rem; }
.px-26 { padding-left: 26rem; padding-right: 26rem; }
.px-27 { padding-left: 27rem; padding-right: 27rem; }
.px-28 { padding-left: 28rem; padding-right: 28rem; }
.px-29 { padding-left: 29rem; padding-right: 29rem; }
.px-30 { padding-left: 30rem; padding-right: 30rem; }

.py-0 { padding-top: 0rem; padding-bottom: 0rem; }
.py-1 { padding-top: 1rem; padding-bottom: 1rem; }
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.py-3 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 4rem; padding-bottom: 4rem; }
.py-5 { padding-top: 5rem; padding-bottom: 5rem; }
.py-6 { padding-top: 6rem; padding-bottom: 6rem; }
.py-7 { padding-top: 7rem; padding-bottom: 7rem; }
.py-8 { padding-top: 8rem; padding-bottom: 8rem; }
.py-9 { padding-top: 9rem; padding-bottom: 9rem; }
.py-10 { padding-top: 10rem; padding-bottom: 10rem; }
.py-11 { padding-top: 11rem; padding-bottom: 11rem; }
.py-12 { padding-top: 12rem; padding-bottom: 12rem; }
.py-13 { padding-top: 13rem; padding-bottom: 13rem; }
.py-14 { padding-top: 14rem; padding-bottom: 14rem; }
.py-15 { padding-top: 15rem; padding-bottom: 15rem; }
.py-16 { padding-top: 16rem; padding-bottom: 16rem; }
.py-17 { padding-top: 17rem; padding-bottom: 17rem; }
.py-18 { padding-top: 18rem; padding-bottom: 18rem; }
.py-19 { padding-top: 19rem; padding-bottom: 19rem; }
.py-20 { padding-top: 20rem; padding-bottom: 20rem; }
.py-21 { padding-top: 21rem; padding-bottom: 21rem; }
.py-22 { padding-top: 22rem; padding-bottom: 22rem; }
.py-23 { padding-top: 23rem; padding-bottom: 23rem; }
.py-24 { padding-top: 24rem; padding-bottom: 24rem; }
.py-25 { padding-top: 25rem; padding-bottom: 25rem; }
.py-26 { padding-top: 26rem; padding-bottom: 26rem; }
.py-27 { padding-top: 27rem; padding-bottom: 27rem; }
.py-28 { padding-top: 28rem; padding-bottom: 28rem; }
.py-29 { padding-top: 29rem; padding-bottom: 29rem; }
.py-30 { padding-top: 30rem; padding-bottom: 30rem; }

/* POSITION */
.static{position:static;}
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.sticky{position:sticky;}

.t-0{top:0;}
.r-0{right:0;}
.b-0{bottom:0;}
.l-0{left:0;}

.t-1{top:1%;}
.t-5{top:5%;}
.t-10{top:10%;}
.t-20{top:20%;}
.t-25{top:25%;}
.t-30{top:30%;}
.t-33{top:33.333%;}
.t-40{top:40%;}
.t-50{top:50%;}
.t-60{top:60%;}
.t-66{top:66.666%;}
.t-70{top:70%;}
.t-75{top:75%;}
.t-80{top:80%;}
.t-90{top:90%;}
.t-100{top:100%;}

.r-1{right:1%;}
.r-5{right:5%;}
.r-10{right:10%;}
.r-20{right:20%;}
.r-25{right:25%;}
.r-30{right:30%;}
.r-33{right:33.333%;}
.r-40{right:40%;}
.r-50{right:50%;}
.r-60{right:60%;}
.r-66{right:66.666%;}
.r-70{right:70%;}
.r-75{right:75%;}
.r-80{right:80%;}
.r-90{right:90%;}
.r-100{right:100%;}

.b-1{bottom:1%;}
.b-5{bottom:5%;}
.b-10{bottom:10%;}
.b-20{bottom:20%;}
.b-25{bottom:25%;}
.b-30{bottom:30%;}
.b-33{bottom:33.333%;}
.b-40{bottom:40%;}
.b-50{bottom:50%;}
.b-60{bottom:60%;}
.b-66{bottom:66.666%;}
.b-70{bottom:70%;}
.b-75{bottom:75%;}
.b-80{bottom:80%;}
.b-90{bottom:90%;}
.b-100{bottom:100%;}

.l-1{left:1%;}
.l-5{left:5%;}
.l-10{left:10%;}
.l-20{left:20%;}
.l-25{left:25%;}
.l-30{left:30%;}
.l-33{left:33.333%;}
.l-40{left:40%;}
.l-50{left:50%;}
.l-60{left:60%;}
.l-66{left:66.666%;}
.l-70{left:70%;}
.l-75{left:75%;}
.l-80{left:80%;}
.l-90{left:90%;}
.l-100{left:100%;}

/* OVERFLOW / SCROLL / SNAP */
.overflow-auto{overflow:auto;}
.overflow-hidden{overflow:hidden;}
.overflow-visible{overflow:visible;}
.overflow-scroll{overflow:scroll;}
.overflow-x-auto{overflow-x:auto;}
.overflow-x-hidden{overflow-x:hidden;}
.overflow-x-visible{overflow-x:visible;}
.overflow-x-scroll{overflow-x:scroll;}
.overflow-y-auto{overflow-y:auto;}
.overflow-y-hidden{overflow-y:hidden;}
.overflow-y-visible{overflow-y:visible;}
.overflow-y-scroll{overflow-y:scroll;}

.scrollbar-hidden {
  /* Firefox */
  scrollbar-width: none;

  /* IE and Edge */
  -ms-overflow-style: none;
}

/* Chrome, Safari, Opera */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.overscroll-auto{overscroll-behavior:auto;}
.overscroll-contain{overscroll-behavior:contain;}
.overscroll-none{overscroll-behavior:none;}
.overscroll-x-auto{overscroll-behavior-x:auto;}
.overscroll-x-contain{overscroll-behavior-x:contain;}
.overscroll-x-none{overscroll-behavior-x:none;}
.overscroll-y-auto{overscroll-behavior-y:auto;}
.overscroll-y-contain{overscroll-behavior-y:contain;}
.overscroll-y-none{overscroll-behavior-y:none;}

.scroll-auto{scroll-behavior:auto;}
.scroll-smooth{scroll-behavior:smooth;}

.snap-none{scroll-snap-type:none;}
.snap-x{scroll-snap-type:x mandatory;}
.snap-y{scroll-snap-type:y mandatory;}
.snap-mandatory{scroll-snap-type:both mandatory;}
.snap-proximity{scroll-snap-type:both proximity;}

.snap-start{scroll-snap-align:start;}
.snap-center{scroll-snap-align:center;}
.snap-end{scroll-snap-align:end;}
.snap-align-none{scroll-snap-align:none;}

.snap-normal{scroll-snap-stop:normal;}
.snap-always{scroll-snap-stop:always;}

.overflow-scroll-touch {-webkit-overflow-scrolling:touch;}

/* Z INDEX */
.z-0{z-index:0;}
.z-1{z-index:1;}
.z-2{z-index:2;}
.z-3{z-index:3;}
.z-4{z-index:4;}
.z-5{z-index:5;}
.z-10{z-index:10;}
.z-20{z-index:20;}
.z-30{z-index:30;}
.z-40{z-index:40;}
.z-50{z-index:50;}
.z-auto{z-index:auto;}

/* TRANSFORM */

.transform { transform: translate(0, 0) scale(1) rotate(0deg) skew(0deg, 0deg); }
.transform-none { transform: none; }

.translate-x-1 { transform: translateX(0.25rem); }
.translate-x-2 { transform: translateX(1rem); }
.translate-x-3 { transform: translateX(2rem); }
.translate-x-4 { transform: translateX(3rem); }
.-translate-x-1 { transform: translateX(-0.25rem); }
.-translate-x-2 { transform: translateX(-1rem); }
.-translate-x-3 { transform: translateX(-2rem); }
.-translate-x-4 { transform: translateX(-3rem); }
.translate-y-1 { transform: translateY(0.25rem); }
.translate-y-2 { transform: translateY(1rem); }
.translate-y-3 { transform: translateY(2rem); }
.translate-y-4 { transform: translateY(3rem); }
.-translate-y-1 { transform: translateY(-0.25rem); }
.-translate-y-2 { transform: translateY(-1rem); }
.-translate-y-3 { transform: translateY(-2rem); }
.-translate-y-4 { transform: translateY(-3rem); }
.translate-x-50 { transform: translateX(50%); }
.-translate-x-50 { transform: translateX(-50%); }
.translate-y-50 { transform: translateY(50%); }
.-translate-y-50 { transform: translateY(-50%); }

.scale-90 { transform: scale(0.9); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.rotate-45 { transform: rotate(45deg); }
.-rotate-45 { transform: rotate(-45deg); }
.rotate-90 { transform: rotate(90deg); }
.-rotate-90 { transform: rotate(-90deg); }
.rotate-180 { transform: rotate(180deg); }
.skew-x-6 { transform: skewX(6deg); }
.-skew-x-6 { transform: skewX(-6deg); }
.skew-y-6 { transform: skewY(6deg); }
.-skew-y-6 { transform: skewY(-6deg); }
.origin-center { transform-origin: center center; }
.origin-top { transform-origin: top center; }
.origin-top-left { transform-origin: top left; }
.origin-top-right { transform-origin: top right; }
.origin-bottom { transform-origin: bottom center; }
.origin-bottom-left { transform-origin: bottom left; }
.origin-bottom-right { transform-origin: bottom right; }

/* object-fit */
.object-contain    { object-fit: contain; }
.object-cover      { object-fit: cover; }
.object-fill       { object-fit: fill; }
.object-none       { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/* object-position */
.object-center        { object-position: center; }
.object-top           { object-position: top; }
.object-bottom        { object-position: bottom; }
.object-left          { object-position: left; }
.object-right         { object-position: right; }
.object-left-top      { object-position: left top; }
.object-left-bottom   { object-position: left bottom; }
.object-right-top     { object-position: right top; }
.object-right-bottom  { object-position: right bottom; }