Pug is not correctly generating the HTML even with the correct pug indentation

I have the following code in Pug which generates the following HTML code:

    - var n = 0
    each street in streets
        if n % 4 == 0
            - n = 0     
            .w3-row-padding
        if n < 4
                .w3-col.l3.m6.w3-margin-bottom
                    .w3-display-container
                        .w3-display-topleft.w3-black.w3-padding 
                            a(href="/ruas/"+street._id) #{street.nome}
                        - var streetName = street._id + "-" + street.nome.replace(/\s/g, "")
                        img(src="/dados/materialBase/atual/"+ streetName +"-Vista1.JPG",alt="House", style="width:100%;height:400px;object-fit: cover;")
        - n = n+1

The resulting HTML code:

<div class="w3-row-padding"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>

And what I actually want it to generate:

<div class="w3-row-padding">
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
</div>

So my question is, what is wrong with this approach in Pug and how can we generate the correct HTML code? I'm indenting the code correctly but nothing seems to work.

This is a crude solution but it seems to work:

.w3-row-padding
    - for(let r=n ; r< n + 4 ; r++)
        if(streets[r])
            .w3-col.l3.m6.w3-margin-bottom
                .w3-display-container
                    .w3-display-topleft.w3-black.w3-padding 
                        a(href="/ruas/"+streets[r]._id) #{streets[r].nome}
                    img(src="/images/dados/materialBase/atual/"+ streets[r].nome +"-Vista1.JPG",alt="House", style="width:100%;height:400px;object-fit: cover;")
                    - n = n+1