Creating a Featured Articles Section on Homepage

Can you start a staging site and make sure everything is disabled except WPSP?

Please disable all caching and optimizing settings from plugins or server - I believe it's the cause of the issue.

Okay, I've disabled all optimization settings server side and all plugins except for GP premium, WP show posts, and the plugin that I used to create the staging site.

Just to confirm, the number of the columns is set to 4 in the WPSP setting right?
https://docs.wpshowposts.com/article/columns-overview/

They were, but it still looked a bit wonky. Things are starting to look much better now though. I believe it was due to optimization settings server side as you suspected. Is there any way to change the general WP show posts typography for all devices and image size for mobile as well? the text is still very large and the images on phone are too small and on tablet too clustered.

Try changing the h4 typography using the customizer option:
https://docs.generatepress.com/article/dynamic-typography-overview/

I believe it should work but let me know :)

Thank you! I was able to change the font size but is there any way to change the color and positioning as well?

Try this:

.wp-show-posts .wp-show-posts-entry-title a {
    color: #000000;
}
.wp-show-posts-entry-header {
    text-align: center;
}

That worked, but for some reason I was only able to adjust the line height of the very last article in the lineup. I adjusted all the other posts from 0 to 5 but didn't see any change.

Not sure if I fully understand. I'm not seeing my CSS being added currently.

The line-height for all articles look consistent as well:
https://www.screencast.com/t/Fa5Zl080rChn

I've linked the screenshot of what it's looking like for me. I'm putting it in the private message section because I don't want to publicly disclose my site yet. The spacing between the top and bottom line of the titles are pretty wide. It let me adjust the line height for the last article but now it's not. The line height for all of them are set to 1. No matter which way I adjust it, it doesn't move.

Can you please clear and disable any caching you are using?

Please keep it like this for the whole duration we are trying to help.

I've had my caching and all optimization plugins and settings disabled since yesterday. Try checking now, I believe my All In One SEO plugin has been doing some caching which I wasn't aware that it was even able to do.

Is this CSS added by you?

#wpsp-1662 > article.wp-show-posts-single.post-1218.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-small-pets.wpsp-col-3 > div > header > h4 > a {
    font-family: inherit;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0px;
    line-height: 1;
}

Have you tried reducing the h4 line-height in the customizer first? It's currently set at 1.7em.

Let's try to avoid adding CSS unless I instructed to do so :)

That did it! I apologize, I'm not very tech savvy. Is there a way to adjust image size for mobile now? I can open a new topic for this if I need to.

A topic here would be good:
https://wordpress.org/support/plugin/wp-show-posts/