// rem là đơn vị tương đối với font-size của thẻ html
// 1rem thường là 16px
$font-sizes: (
    "0\\.5": 0.5rem,
    "0\\.625": 0.625rem,
    "0\\.75": 0.75rem,
    "0\\.875": 0.875rem,
    "1": 1rem,
    "1\\.125": 1.125rem,
    "1\\.25": 1.25rem,
    "1\\.5": 1.5rem,
    "1\\.75": 1.75rem,
    "2": 2rem,
    "2\\.25": 2.25rem,
    "2\\.5": 2.5rem,
    "2\\.75": 2.75rem,
    "3": 3rem,
    "4": 4rem,
	"5": 5rem,
	"6": 6rem
);

@each $size, $value in $font-sizes {
    @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

            .font-size#{$infix}-#{$size} {
                font-size: $value !important;
            }
        }
    }  
}