CODE EXAMPLE FOR CSS

responsive text size

$-xs-text: h1 22px, h2 18px, h3 14px, h4 12px, h5 11px, h6 10px, p 10px;
$-sm-text: h1 25px, h2 18px, h3 14px, h4 13px, h5 12px, h6 10px, p 10px
$-md-text: h1 30px, h2 21px, h3 16px, h4 14px, h5 13px, h6 12px, p 12px;
$-xl-text: h1 37px, h2 23px, h3 19px, h4 16px, h5 16px, h6 14px, p 14px;
$xxl-text: h1 45px, h2 28px, h3 23px, h4 20px, h5 18px, h6 16px, p 16px;

$responsive-text-sizes: (
    xs: $-xs-text,
    sm: $-sm-text,
    md: $-md-text,
    xl: $-xl-text,
    xxl: $xxl-text,
);
@each $breakpoints in map-keys($map: $responsive-text-sizes) {
    @include media-breakpoint-up($breakpoints) {
        @each $element, $size, $py, $px, $fw in map-get($map: $responsive-text-sizes, $key: $breakpoints) {
            #{$element}.responsive {
                font-size: $size;
                font-weight: $fw;
                padding: $py $px;
            }
        }
    }
}