How to properly install HTML5 template on MODX engine?

Question

MODX

I installed xampp, and the HTML template on the Modx engine, but the problem is this: there are 5 pictures hidden here that change in queues when clicked, and the jpg files themselves are actually hidden in main.css, and when I changed the name of the picture in main.css to my own in folder directory, nothing has changed, but if you change through Google F12 with the mouse in manual then the picture changes.

What did I do wrong when installing the template? All styles are included, everything is written in the "Initial template": This template is a demo version

of Index.html:

<!-- Project Background -->
                <div class="bg">
                    <div class="overlay-bg"></div>
                    <div class="project-img project-1"></div>
                </div>
                <!-- overlay on slide -->
                <div class="overlay-swipe">
                    <div class="over-1"></div>
                    <div class="over-2"></div>
                    <div class="over-3"></div>
                    <div class="over-4"></div>
                    <div class="over-5"></div>
                </div>
            </div>

main.css:

.project-1 {
    background: url('../img/portfolio/1.jpg') no-repeat;
}

.project-2 {
    background: url('../img/portfolio/2.jpg') no-repeat;
}

.project-3 {
    background: url('../img/portfolio/3.jpg') no-repeat;
}

.project-4 {
    background: url('../img/portfolio/4.jpg') no-repeat;
}

.project-5 {
    background: url('../img/portfolio/5.jpg') no-repeat;
}