Resize Banner Slideshow Images on Mobile

Looking to resize banner slideshow on multiple pages. Does the same code work on all pages or do I need custom CSS for each page?

https://www.premierrinks.com/

https://www.premierrinks.com/refrigerated-ice-rinks

https://www.premierrinks.com/roller-skating-rinks

https://www.premierrinks.com/synthetic-ice-rinks

https://www.premierrinks.com/other-services

If you use Business Plan/higher, add this code to Page Settings > Advanced > Code Injection of 5 pages

<style>
  @media screen and (max-width:767px) {
  article section:first-child {
    min-height: unset !important;
    height: 30vh;
    margin-top: 10vh;
}
  }
</style>

If you use Personal/Basic Plan, you can edit 5 pages > Add a Code Block (anywhere on page) > Use this code

<style>
  @media screen and (max-width:767px) {
  article section:first-child {
    min-height: unset !important;
    height: 30vh;
    margin-top: 10vh;
}
  }
</style>

You can adjust number 30 and 10.