Replacing aspect-ratio: 1; with, padding-top: 56.25%;

HTML/CSS
1

I mean using padding-top: 56.25%; instead of aspect-ratio in the code.

That means removing aspect-ratio and using padding-top: 56.25%;

How do I do that here: https://jsfiddle.net/37qob51s/

All I am doing is replacing aspect-ratio: 1; with, padding-top: 56.25%; in the code.

.inner {
height: 100%;
width: 200%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}

.panel-right .inner {
left: -100%;
}

.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
aspect-ratio: 1;
margin: auto;
height: 100%;
}

.inner:before {
content: "";
background: url(https://i.imgur.com/z5MMJnv.png);
}

.inner:after {
content: "";
background: url(https://i.imgur.com/8Jf8LLc.png);
}

.inner span {
background: url(https://i.imgur.com/5u16syR.png);
position: relative;
}

.inner span:before,
.inner span:after {
content: "";
display: block;
position: absolute;
inset: 0 0 0 0;
}

.inner span:before {
background: url(https://i.imgur.com/ygTtvme.png);
transform: translateX(-99.99%);
}

.inner span:after {
background: url(https://i.imgur.com/QziKNDW.png);
transform: translateX(99.99%);
}

.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
background-size: cover;
}