Я использовал наложение на изображение, но второе изображение не показывалось на RWD (оно есть только у первого pi c)

Question

Я использовал перекрытие на моем пи c. Это мой код.

HTML

<div>
        <img src="thehall.png">
    <div class="c2">
        <img src="cards2.png" id="P2">
    </div>
    <div class="c3">
        <img src="cards3.png" id="P3">
    </div>
    <div class="c4">
        <img src="cards4.png" id="P4">
    </div>
    </div>

CSS

body
{
    margin: 0 auto;
    background-image: url(blackground30015.png);
    background-size: cover;
}

.container-fluid
{

    max-width: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

img
{
    max-width: 100%;
    background-repeat:no-repeat;
}



#P2{
        position:fixed;
        left:32%;
        z-index:1;
        cursor: pointer;
        bottom: 40%;
    }
#P3{
        position:fixed;
        left:50%;
        z-index:1;
        cursor: pointer;
        bottom: 40%;
    }
#P4{
        position:fixed;
        left:68%;
        z-index:1;
        cursor: pointer;
        bottom: 40%;
    }

Но pic2 pic3 pic4 не может использоваться RWD. Когда я сузил страницу, которая не масштабировалась с thehall.png. Как я могу позволить pic234 увеличить изображение.

Я пытаюсь использовать max-width: 100%, scale (x, y). Это тоже не работает или есть другие способы? (ps. Я впервые задаю вопрос. Если мой вопрос не так понятен, прости.)