Reduce headings for responsive

I can't manage to make the headlines smaller for mobile phones.
I would like the word "translation" to be displayed smaller on the mobile phone.

https://astrid-schuenemann.de/en/books.html

I have adjusted the individual fonts in custom.css.





h3{

	font-size: 1.8em;

    text-rendering: optimizelegibility;

	text-transform: uppercase;

}



h1, h2{

	font-size: 1.5em;

    text-rendering: optimizelegibility;

}





h4, h5, h6 {

	font-size: 1.4em;

    text-rendering: optimizelegibility;

}

I have tried with media queries. Unfortunately I can't get it to work.



/* All Smartphones in portrait and landscape ----------- */

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) {

/* YOUR STYLE GOES HERE */

}