image not showing up on mobile device (HTML,SASS,CSS)

My image is showing perfectly in desktop and also when I use chrome developer tools for checking how it looks on mobile but when I tested in a real device, the image is not showing up.

Here is the screenshot how it looks when I tested in chrome developer tools

Here is the screenshot how it look when I tested in the real device

Here is the sass code:

.story{
width: 75%;
margin: 0 auto;
padding: 6rem;
box-shadow: $box-shadow;
border-radius: 3px;
padding-left: 9rem;
transform: skewX(-12deg);
background-color: rgba($color-white,.6);
color: $color-black;


@include respond(tab-port){
    transform: skew(0);
    width: 100%;
    padding: 4rem;
    padding-left: 6rem;
}


&__shape{
    width: 15rem;
    height: 15rem;
    float: left;
    // @include clearfix;
    -webkit-shape-outside: circle(50% at 50% 50%);
    shape-outside: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    transform: translateX(-3rem) translateY(-.5rem) skewX(12deg);
    position: relative;

    @include respond(tab-port){
        transform: translateX(-3rem) translateY(-.5rem) skewX(0);
    }

}


&__image{
    height: 100%;
    transform: translateX(-4rem) scale(1.4);
    transition: all .4s;
    // backface-visibility: hidden;
}


&__text{
    transform: skewX(12deg);

    @include respond(tab-port){
        transform: skew(0); 
    }

}


&__caption{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,20%);
    color: $color-white;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.7rem;
    opacity: 0;
    transition: all .5s;
}

&:hover &__caption{
    opacity: 1;
    transform: translate(-50%,-50%);
}

&:hover &__image{
    transform: translateX(-4rem) scale(1);
}

}

Here is the HTML code:

<div class="section-stories__heading">
                <div class="u-center-text u-margin-bottom-large">
                    <h2 class="heading-secondary">we make people genuinely happy</h2>
                </div>

                <div class="row">
                    <div class="story">
                        <figure class="story__shape">
                            <img src="../img/nat-8.jpg" alt="nat-8" class="story__image">
                            <figcaption class="story__caption">Mary Smith</figcaption>
                        </figure>
                        
                        <div class="story__text">
                            <h3 class="heading-tertiary u-margin-bottom-small">I reduced my 20kg by doing yoga daily</h3>
                            <p class="story__text-para">
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus veniam nemo rerum odit. Maxime fuga obcaecati ut vel facere amet aperiam beatae odit. Voluptates reiciendis atque assumenda, incidunt exercitationem nihi lwwwwww wqq qqqqqq qqqq qqqqqqqq.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="story">
                        <figure class="story__shape">
                            <img src="../img/nat-9.jpg" alt="nat-9" class="story__image">
                            <figcaption class="story__caption">jack wilson</figcaption>
                        </figure>
                        <div class="story__text">
                            <h3 class="heading-tertiary u-margin-bottom-small">I reduced my 20kg by doing yoga daily</h3>
                            <p class="story__text-para">
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus veniam nemo rerum odit. Maxime fuga obcaecati ut vel facere amet aperiam beatae odit. Voluptates reiciendis atque assumenda, incidunt exercitationem nihilwwwwwww qqqqqq qqqq q.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="u-center-text">
                    <a href="#" class="btn-black u-margin-top-medium">Discover All Stories</a>
                </div>
            </div>