:root {
  --title-fallback: ;
  --title: ;
  --h1-fallback: 2.25rem;
  --h1: clamp(2.5rem, 2.0454545454545454rem + 1.8181818181818181vw, 3.5rem);
  --h2-fallback: 2rem;
  --h2: clamp(2rem, 1.6590909090909092rem + 1.3636363636363635vw, 2.75rem);
  --h3-fallback: 1.75rem;
  --h3: clamp(1.5rem, 1.2727272727272727rem + 0.9090909090909091vw, 2rem);
  --h4-fallback: 1.5rem;
  --h4: clamp(1.25rem, 1.0227272727272727rem + 0.9090909090909091vw, 1.75rem);
  --h5-fallback: 1.25rem;
  --h5: clamp(1.125rem, calc(1.125rem + ((1vw - 0.225rem) * 0.2174)), 1.25rem);
  --h6-fallback: 1.38rem;
  --h6: clamp(1.13rem, 1.05rem - -0.37vw, 1.38rem);

  --text-xxs: 0.75rem;
	--text-xs: 0.875rem;
  --text-s-fallback: 0.95rem;
  --text-s: clamp(0.925rem, 0.871rem + 0.143vw, 1rem);
  --text-m-fallback: 1.075rem;
  --text-m: clamp(1rem, 0.911rem + 0.238vw, 1.125rem);
  --text-l-fallback: 1.125rem;
  --text-l: clamp(1.125rem, 1.036rem + 0.238vw, 1.25rem);
  --text-xl-fallback: 1.2rem;
  --text-xl: clamp(1.25rem, 1.161rem + 0.238vw, 1.375rem);
  --text-xxl-fallback: 1.25rem;
  --text-xxl: clamp(1.375rem, 1.286rem + 0.238vw, 1.5rem);

	--space-tiny-fallback: 0.25rem; 
  --space-tiny: 0.25rem;
  --space-xxs-fallback: 0.5rem;
  --space-xxs: 0.5rem;
  --space-xs-fallback: 1rem;
  --space-xs: clamp(0.75rem, 0.636rem + 0.455vw, 1rem);
  --space-s-fallback: 2rem;
  --space-s: clamp(1.5rem, 1.273rem + 0.909vw, 2rem);
  --space-m-fallback: 3rem;
  --space-m: clamp(2.5rem, 2.273rem + 0.909vw, 3rem);
  --space-l-fallback: 4rem;
  --space-l: clamp(3rem, 2.545rem + 1.818vw, 4rem);
  --space-xl-fallback: 5rem;
  --space-xl: clamp(4rem, 3.545rem + 1.818vw, 5rem);
  --space-xxl-fallback: 7rem;
  --space-xxl: clamp(5.5rem, 4.818rem + 2.727vw, 7rem);
	--space-huge-fallback: 10rem;
  --space-huge: clamp(8rem, 7.091rem + 3.636vw, 10rem);
}

/* Title Classes */
.h1 {
	font-size: var(--h1);
}
.h2 {
	font-size: var(--h2);
}
.h3 {
	font-size: var(--h3);
}
.h4 {
	font-size: var(--h4);
}
.h5 {
	font-size: var(--h5);
}
.h6 {
	font-size: var(--h6);
}

/* Text Classes */
.text-xxs {
	font-size: var(--text-xxs);
}
.text-xs {
	font-size: var(--text-xs);
}
.text-s {
	font-size: var(--text-s);
}
.text-m {
	font-size: var(--text-m);
}
.text-l {
	font-size: var(--text-l);
}
.text-xl {
	font-size: var(--text-xl);
}
.text-xxl {
	font-size: var(--text-xxl);
}

/* Text Align and Case */
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.capitalize {
    text-transform: capitalize;
}

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

/* Margin Classes */
.m-auto {
	margin-left: auto;
  margin-right: auto;
}
.m-tiny {
	margin: var(--space-tiny);
}
.m-xxs {
	margin: var(--space-xxs);
}
.m-xs {
	margin: var(--space-xs);
}
.m-s {
	margin: var(--space-s);
}
.m-m {
	margin: var(--space-m);
}
.m-l {
	margin: var(--space-l);
}
.m-xl {
	margin: var(--space-xl);
}
.m-xxl {
	margin: var(--space-xxl);
}
.m-huge {
	margin: var(--space-huge);
}


.m-top-tiny {
	margin-top: var(--space-tiny);
}
.m-top-xxs {
	margin-top: var(--space-xxs);
}
.m-top-xs {
	margin-top: var(--space-xs);
}
.m-top-s {
	margin-top: var(--space-s);
}
.m-top-m {
	margin-top: var(--space-m);
}
.m-top-l {
	margin-top: var(--space-l);
}
.m-top-xl {
	margin-top: var(--space-xl);
}
.m-top-xxl {
	margin-top: var(--space-xxl);
}
.m-top-huge {
	margin-top: var(--space-huge);
}


.m-bottom-tiny {
	margin-bottom: var(--space-tiny);
}
.m-bottom-xxs {
	margin-bottom: var(--space-xxs);
}
.m-bottom-xs {
	margin-bottom: var(--space-xs);
}
.m-bottom-s {
	margin-bottom: var(--space-s);
}
.m-bottom-m {
	margin-bottom: var(--space-m);
}
.m-bottom-l {
	margin-bottom: var(--space-l);
}
.m-bottom-xl {
	margin-bottom: var(--space-xl);
}
.m-bottom-xxl {
	margin-bottom: var(--space-xxl);
}
.m-bottom-huge {
	margin-bottom: var(--space-huge);
}


.m-left-tiny {
	margin-left: var(--space-tiny);
}
.m-left-xxs {
	margin-left: var(--space-xxs);
}
.m-left-xs {
	margin-left: var(--space-xs);
}
.m-left-s {
	margin-left: var(--space-s);
}
.m-left-m {
	margin-left: var(--space-m);
}
.m-left-l {
	margin-left: var(--space-l);
}
.m-left-xl {
	margin-left: var(--space-xl);
}
.m-left-xxl {
	margin-left: var(--space-xxl);
}
.m-left-huge {
	margin-left: var(--space-huge);
}


.m-right-tiny {
	margin-right: var(--space-tiny);
}
.m-right-xxs {
	margin-right: var(--space-xxs);
}
.m-right-xs {
	margin-right: var(--space-xs);
}
.m-right-s {
	margin-right: var(--space-s);
}
.m-right-m {
	margin-right: var(--space-m);
}
.m-right-l {
	margin-right: var(--space-l);
}
.m-right-xl {
	margin-right: var(--space-xl);
}
.m-right-xxl {
	margin-right: var(--space-xxl);
}
.m-right-huge {
	margin-right: var(--space-huge);
}

/* Padding Classes */
.p-tiny {
	padding: var(--space-tiny);
}
.p-xxs {
	padding: var(--space-xxs);
}
.p-xs {
	padding: var(--space-xs);
}
.p-s {
	padding: var(--space-s);
}
.p-m {
	padding: var(--space-m);
}
.p-l {
	padding: var(--space-l);
}
.p-xl {
	padding: var(--space-xl);
}
.p-xxl {
	padding: var(--space-xxl);
}
.p-huge {
	padding: var(--space-huge);
}


.p-top-tiny {
	padding-top: var(--space-tiny);
}
.p-top-xxs {
	padding-top: var(--space-xxs);
}
.p-top-xs {
	padding-top: var(--space-xs);
}
.p-top-s {
	padding-top: var(--space-s);
}
.p-top-m {
	padding-top: var(--space-m);
}
.p-top-l {
	padding-top: var(--space-l);
}
.p-top-xl {
	padding-top: var(--space-xl);
}
.p-top-xxl {
	padding-top: var(--space-xxl);
}
.p-top-huge {
	padding-top: var(--space-huge);
}


.p-bottom-tiny {
	padding-bottom: var(--space-tiny);
}
.p-bottom-xxs {
	padding-bottom: var(--space-xxs);
}
.p-bottom-xs {
	padding-bottom: var(--space-xs);
}
.p-bottom-s {
	padding-bottom: var(--space-s);
}
.p-bottom-m {
	padding-bottom: var(--space-m);
}
.p-bottom-l {
	padding-bottom: var(--space-l);
}
.p-bottom-xl {
	padding-bottom: var(--space-xl);
}
.p-bottom-xxl {
	padding-bottom: var(--space-xxl);
}
.p-bottom-huge {
	padding-bottom: var(--space-huge);
}


.p-left-tiny {
	padding-left: var(--space-tiny);
}
.p-left-xxs {
	padding-left: var(--space-xxs);
}
.p-left-xs {
	padding-left: var(--space-xs);
}
.p-left-s {
	padding-left: var(--space-s);
}
.p-left-m {
	padding-left: var(--space-m);
}
.p-left-l {
	padding-left: var(--space-l);
}
.p-left-xl {
	padding-left: var(--space-xl);
}
.p-left-xxl {
	padding-left: var(--space-xxl);
}
.p-left-huge {
	padding-left: var(--space-huge);
}


.p-right-tiny {
	padding-right: var(--space-tiny);
}
.p-right-xxs {
	padding-right: var(--space-xxs);
}
.p-right-xs {
	padding-right: var(--space-xs);
}
.p-right-s {
	padding-right: var(--space-s);
}
.p-right-m {
	padding-right: var(--space-m);
}
.p-right-l {
	padding-right: var(--space-l);
}
.p-right-xl {
	padding-right: var(--space-xl);
}
.p-right-xxl {
	padding-right: var(--space-xxl);
}
.p-right-huge {
	padding-right: var(--space-huge);
}

/* Gap */
.gap-tiny {
	gap: var(--space-tiny);
}
.gap-xxs {
	gap: var(--space-xxs);
}
.gap-xs {
	gap: var(--space-xs);
}
.gap-s {
	gap: var(--space-s);
}
.gap-m {
	gap: var(--space-m);
}
.gap-l {
	gap: var(--space-l);
}
.gap-xl {
	gap: var(--space-xl);
}
.gap-xxl {
	gap: var(--space-xxl);
}
.gap-huge {
	gap: var(--space-huge);
}

/* Max-Width */
.max-width-320 {
width: 100%;
max-width: 20rem;
}
.max-width-400 {
width: 100%;
max-width: 25rem;
}
.max-width-480 {
width: 100%;
max-width: 30rem;
}
.max-width-560 {
width: 100%;
max-width: 35rem;
}
.max-width-640 {
width: 100%;
max-width: 40rem;
}
.max-width-720 {
width: 100%;
max-width: 45rem;
}
.max-width-800 {
width: 100%;
max-width: 50rem;
}
.max-width-880 {
width: 100%;
max-width: 55rem;
}
.max-width-960 {
width: 100%;
max-width: 60rem;
}
.max-width-1040 {
width: 100%;
max-width: 65rem;
}
.max-width-1120 {
width: 100%;
max-width: 70rem;
}
.max-width-full {
width: 100%;
}

/* Text Align and Case */
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.capitalize {
    text-transform: capitalize;
}

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

/* Flexbox Justify-content */
.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;
}

/* Flexbox Align-items */
.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;
}

/* Flexbox Align-self */
.self-start {
	align-self: flex-start;
}
.self-end {
	align-self: flex-end;
}
.self-center	{
	align-self: center;
}
.self-baseline {
	align-self: baseline;
}
.self-stretch	{
	align-self: stretch;
}