The responsive padding is a bit weird. Having different padding for top/bottom and left/right looks a bit weird.
Also, for centering, I definitely prefer using position: absolute and transform: translate(-50%, -50%)
Centering with position absolute does not work well if the content can be wider/higher than the container (like responsive layouts or if the content is unknown).
Using grid/flexbox fixes that and other corner-cases.
Thanks for sharing!
Very helpful for inspiration and implementation.