How to edit Tab and Product style?

Hi! I want to ask about Tab style and Product style.

Currently, my home page looks like this (https://prnt.sc/10sjnxj) in a desktop version, but in a mobile version, its tab style changed like this (https://prnt.sc/10sjott).
I wanted to make a mobile version possible to show the icon images in a tab like a desktop. So I have changed the style from style 1 to style 2, but it looks weird. (https://prnt.sc/10sk2gh)

And I would like to make it possible to show products like this (https://prnt.sc/10skfxm) to make customers notice easily that there are more products remained. But I don't know how to handle it with the current product style.

Furthermore, I wanted to make this tab with different colors and arranged in the central. So I was trying to edit margin and padding and so on, but it doesn't look so nice. Also, I don't know how to change the tab color. (https://prnt.sc/10skmfg)
And even though there are more products to be shown, but I don't know why it doesn't work and shows only 4 products.

Lastly, how can I change the button style and color? I mean "select options" or "add to cart". And is there a way to make these buttons deactivated if there is no stock?

Thanks for your support in advance.