Not everyone will be using websites on the same device or viewing it on the same resolution. For this reason, developers have introduced media breakpoints to make their website more compatible with different types of devices. A breakpoint is a key word used to tell the site when to change to a certain layout and implement new rules.
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more — Extra large screens, TV
If a screen falls within the screen size range then it will use that certain text class. This is done so that the user has the best possible experience
More than 50% of web traffic is done through mobile devices. People in today’s age don’t have the time or want to struggle with a web page they must navigate more than others. By making the website look more appealing for their screen size this will make them more likely to return to the website. This also helps the readability of the website when resizing the screen in case a user would like to minimize the screen to multitask.
https://www.lambdatest.com/blog/how-to-use-css-breakpoints-for-responsive-design/
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/