Changing default media queries

Hi

I have a client that have used the ‘Customize > Typgraphy’ tabs, to create general styling for the headers. All this works fine, and we set different font-size/line-height for iPad/Mobile. However, the default breakpoints isn’t satisfactory, so we would want to change them (currently: iPad = max 768px, phone = max 480px), to something like (iPad = 1024px, phone = 768px)

I considered simply overwriting the css myself, however the style.css file (id=”wp-custom-css”) makes a normal h1 styling, then a h1 @ media (max-width:768px) and then a h1 @ media (max-width:480px). This means 3 seperate styling PER element that is changed in typography.

Example:

h1 {
	font-family: Droid Serif;
	font-weight: 400;
	font-style: italic;
	font-size: 55px;
	color: #32322d
}

@media (max-width: 768px) {
	h1 {
		font-size:25px;
		line-height: 1.4
	}
}

@media (max-width: 480px) {
	h1 {
		font-size:32px;
		line-height: 1.5
	}
}

Is there another way to do this? Like editing a child-theme’s function or something, so we’re able to set a general iPad/mobile breakpoint, that is defined whenever we change something in ‘Appereance > Customize’

Thanks for helping,
Mikkel