Forms Loop and Header size on Mobile

I created this Page — https://charity.cordialtec.com.ng/donation/

But I have 2 issues I will like to get solved, based on this Page

1.) You can see that I placed 2 Forms on the Page, using their Shortcodes.

QUESTION 1:
How can I create a “Forms Archive Page“– where I can enter just one shortcode, and it will list out all the Donation Forms I have on my website in a loop Array, without me needing to come and enter them one by one on a Page ?

2.) DONATION HEADER SIZE ON MOBILE
On Mobile Phone, the size of the Header is too large, and I will like to reduce it to 18 pixels.

Upon using the Browser’s Inspect tool, I saw the CSS rules, and tried to adapt it to Mobile, as seen below:

@media screen and (max-width: 600px) {
  .givewp-layouts-headerTitle h2 {
    /* Apply some styles */
    color: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;

  }
}

Unfortunately, the code did not work!

QUESTION 2
Can you Please help me with the CSS Code that can help me reduce the Header Font size on Mobile to 18 pixels ?

Regards.