:root {
  --xxs: clamp(0.5rem, calc(0.80rem + -0.02vw), 0.80rem);
  --xs: clamp(0.875rem, calc(0.95rem + -0.03vw), 0.95rem);
  --sm: clamp(1rem, calc(0.95rem + 0.2vw), 1.2rem);
  --md: clamp(1.2rem, calc(1.1rem + 0.6vw), 1.8rem);
  --lg: clamp(1.5rem, calc(1.25rem + 1.2vw), 2.7rem);
  --xl: clamp(1.75rem, calc(1.25rem + 2.2vw), 3.8rem);
  --xxl: clamp(2rem, calc(1.4rem + 3vw), 4.9rem);
}
body {
font-size: 1rem;
line-height: 1.6rem;
font-weight:400;
font-family: sans-serif;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
margin-top: 0;
margin-bottom: 0;
font-weight: 700;
line-height: 1.2;
}

.font-xs {
	font-size: var(--xs);
		line-height: 3vw;
}

.font-sm {
	font-size: var(--sm);
		line-height: 4vw;
}

.font-md {
	font-size: var(--md);
		line-height: 5vw;
}

.font-lg {
	font-size: var(--lg);
		line-height: 6vw;
}

.font-xl {
	font-size: var(--xl);
		line-height: 7vw;
}
.font-xxl {
	font-size: var(--xxl);
	line-height: 8vw;

}

/* Headings */
h1, .h1 {
font-size: var(--xl);
}
h2, .h2 {
font-size: var(--lg);
}
h3, .h3 {
font-size: var(--md);
}
h4, .h4 {
font-size: var(--sm);
}
h5, .h5 {
font-size: var(--xs);
}
h6, .h6 {
font-size: var(--xxs);
}

p {
font-size: var(--sm);
line-height: 1.8rem;
}


li {
font-size: var(--sm);
line-height: 1.5em;
margin: 0;
}

/* Display font */
.display-XL {
font-size: 12vw;
line-height:12vw;
}
.display-LG {
font-size: 10vw;
line-height:10vw;
}
.display-MD {
font-size: 8vw;
line-height:8vw;
}
.display-SM {
font-size: 6vw;
line-height:6vw
}
.display-XS {
font-size: 4vw;
line-height:4vw;
}

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}

.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}

.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}

.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}

.foo {color:red;}

.mainPad {padding:2rem 1rem 3rem;}