Titles are not consistent on different pages and sections

Hey everyone!

I see different sizes of titles on desktop and mobile and want to make sure they look consistent but that doesn't seem to be the case.

1. The title on the homepage hero has a different size vs other pages

2. Blog post titles were showing up weirdly so I tried to fix them on desktop and mobile for better readability with some CSS (added below)

Goal: To have consistent, good-looking font sizes for titles across the website on all devices. Don't mind any suggestions for paragraphs either.

/* Common styles for custom H2, H3, and H4 on all devices */
.blog-item-wrapper h2 {font-size: 30px !important;}

.blog-item-wrapper h3 {font-size: 25px !important;}

.blog-item-wrapper h4 {font-size: 20px !important;}

/* Mobile blog titles */
@media screen and (max-width: 767px) {
.blog-item-wrapper h2 {font-size: 25px !important;}

.blog-item-wrapper h3 {font-size: 20px !important;}

.blog-item-wrapper h4 {font-size: 15px !important;}
}

/* Tablet blog titles */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.blog-item-wrapper h2 {font-size: 25px !important;}

.blog-item-wrapper h3 {font-size: 22px !important;}

.blog-item-wrapper h4 {font-size: 18px !important;}
}
/* Fix h2, h3, h4 padding on blog*/
.sqs-block-code,
.sqs-block-code * {
    margin: 2px !important;
    padding: 2px !important;
}

Thank you very much! Appreciate all the help here. Found tuanphan and Ziggy quite helpful already!

Thank you, Ziggy! Here are the pages:

homepage
https://www.dataterminus.com/services
https://www.dataterminus.com/blog
https://www.dataterminus.com/contact

I believe you might be right there!

I can't say that I can see the disparity in font sizes on these pages, can you help me find the problem you're trying to solve?

Thank you for having a look Ziggy! I tried to fix it using rem as you mentioned from the interface vs using CSS except for the blog(s). So, if it looks good enough then I think we are good! 🙂