Responsive Heading Template

/* XXXL Headings */
.xxxlarge-h1 h1 {
font-size: clamp(4rem, 8vw, 8rem) !important;
}
.xxxlarge-h1-s h1 {
font-size: clamp(2rem, 8vw, 8rem) !important;
}
.xxxlarge-h2 h2 {
font-size: clamp(3.5rem, 7vw, 6rem) !important;
}
.xxxlarge-h2-s h2 {
font-size: clamp(1.5rem, 7vw, 6rem) !important;
}

/* Extra Extra Large Headings */
.xxlarge-h1 h1 {
font-size: clamp(4rem, 7vw, 7rem) !important;
}
.xxlarge-h1-s h1 {
font-size: clamp(2rem, 7vw, 7rem) !important;
}
.xxlarge-h2 h2 {
font-size: clamp(3rem, 6vw, 6rem) !important;
}
.xxlarge-h2-s h2 {
font-size: clamp(1.5rem, 6vw, 6rem) !important;
}

/* Extra Large Headings */
.xlarge-h1 h1 {
font-size: clamp(3.5rem, 6vw, 6rem) !important;
}
.xlarge-h1-s h1 {
font-size: clamp(2rem, 6vw, 6rem) !important;
}
.xlarge-h2 h2 {
font-size: clamp(2.5rem, 4.5vw, 5rem) !important;
}
.xlarge-h2-s h2 {
font-size: clamp(1.5rem, 4.5vw, 5rem) !important;
}
.xlarge-h3 h3 {
font-size: clamp(2.5rem, 4vw, 4.5rem) !important;
}
.xlarge-h4 h4 {
font-size: clamp(2rem, 3.5vw, 4rem) !important;
}

/* Large Headings */
.large-h1 h1 {
font-size: clamp(3rem, 5vw, 5rem) !important;
}
.large-h1-s h1 {
font-size: clamp(2rem, 5vw, 5rem) !important;
}
.large-h2 h2 {
font-size: clamp(2.5rem, 4vw, 4rem) !important;
}
.large-h2-s h2 {
font-size: clamp(1.5rem, 4vw, 4rem) !important;
}
.large-h3 h3 {
font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
}
.large-h4 h4 {
font-size: clamp(1.7rem, 3vw, 3rem) !important;
}
/* Medium Headings */
.medium-h1 h1 {
font-size: clamp(2.5rem, 4vw, 4rem) !important;
}
.medium-h2 h2 {
font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
}
.medium-h3 h3 {
font-size: clamp(1.5rem, 3vw, 3rem) !important;
}
.medium-h4 h4 {
font-size: clamp(1.3rem, 2.5vw, 2.5rem) !important;
}
/* Small Headings */
.small-h1 h1 {
font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
}
.small-h2 h2 {
font-size: clamp(1.5rem, 3vw, 3rem) !important;
}
.small-h3 h3 {
font-size: clamp(1.3rem, 2.5vw, 2.5rem) !important;
}
.small-h4 h4 {
font-size: clamp(1rem, 2vw, 2rem) !important;
}
/* Extra Small Headings */
.xsmall-h1 h1 {
font-size: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}
.xsmall-h2 h2 {
font-size: clamp(1.2rem, 2vw, 2rem) !important;
}
.xsmall-h3 h3 {
font-size: clamp(1rem, 1.5vw, 1.5rem) !important;
}
.xsmall-h4 h4 {
font-size: clamp(0.8rem, 1.2vw, 1.2rem) !important;
}