El 56.25% que se le asignó al ~~~padding-bottom~~~ no es un número aleatorio, viene de la siguiente fórmula:

• (aspect ratio height / aspect ratio width) * 100

Entonces, si buscamos un aspect ratio de 16:9, haríamos lo siguiente:

• (9 / 16) * 100 = 56.25

Para un aspect ratio de 4:3:

• (3 / 4) * 100 = 75

Y así con el aspect ratio que queramos.

Este link tiene más información sobre el tema: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp (ahí utilizan ~~~padding-top~~~ en vez de ~~~padding-bottom~~~, pero es lo mismo).