Banner Image Zooms in on Mobile

I have a static html page https://www.poggenamp.com with a mobile version. The mobile manner appears zoomed in, and I am not sure how to fix it. Checking through Chrome's Inspector as well as my iPhone 13 Pro. I have added my CSS code that is applied to the banner and removed the rest.

@media only screen and (max-width: 1400px) {
    .container {
        max-width: 1140px
    }

    .banner:after {
        width: 100%;
    }
}

@media only screen and (max-width: 1199px) {
    .buttonmain {
        padding: 12px 10px;
        font-size: 14px;
    }

    .banner {
        padding: 60px 0 120px;
    }

    .banner .title {
        font-size: 36px;
        line-height: 44px;
    }

@media only screen and (max-width: 991px) {
    .banner .title {
        font-weight: 800;
        font-size: 30px;
        line-height: 38px;
    }

    @media only screen and (max-width: 767px) {
        .banner {
            padding: 60px 0 130px;
        }

        .banner:after {
            height: 100vh;
            width: 100%;
            background-size: cover;
            background: url(../images/MobileBannerPANG.jpg);
            opacity: 0.2;
            z-index: -10;
        }

        .banner:before {
            height: 50%;
            top: -50px;
        }
    }

You are overriding background-size property by setting a background property right after. Use background-image instead.

So instead of:

.banner:after {
    background-size: contain;
    background: url(../images/MobileBannerPANG.jpg);
}

Use:

.banner:after {
    background-size: contain;
    background-image: url(../images/MobileBannerPANG.jpg);
}

Do this for the ones in @media as well.