// oszlopok

@margin: 2rem;
@iterations: 9;

.column-loop (@i) when (@i > 1) {
    .column-@{i} > div {
        // közvetlen gyermek > div
        width: calc(100% / @i ~"- @{margin}"); // kilépő karakter
        margin-right: @margin / 2; // margin fele
        margin-left: @margin / 2;
    }

    .column-@{i} {
        display: flex;
        flex-wrap: wrap;
        margin-right: -@margin / 2; // mínusz margin 
        margin-left: -@margin / 2;
    }

    .column-loop(@i - 1);
}

.column-loop (@iterations);

// %

.column {
    display: flex;
    flex-wrap: wrap;
    margin-right: -@margin / 2;
    margin-left:  -@margin / 2;
}

@iterations: 9;

.col-loop (@i) when (@i > 0) {
    .column-@{i}0 {
        width: calc(@i*10% ~"- @{margin}"); // kilépő karakter
        margin-right: @margin / 2; // margin fele
        margin-left: @margin / 2;
    }
    .col-loop(@i - 1);
}

.col-loop (@iterations);



@media screen and (min-width: 480px) and (max-width: 768px) {

    .column-9 > div,
    .column-8 > div,
    .column-7 > div {
        width: calc(100% / 6 -"- @{margin}"); // ezekből mindig 6 oszlop lesz
    }

    .column-6 > div,
    .column-5 > div {        
        width: calc(100% / 3 -"- @{margin}");        // ezekből mindig 3 oszlop lesz
    }
}

@media screen and (max-width: 479px) {

    .column-9 > div,
    .column-8 > div,
    .column-7 > div {
        width: calc(100% / 3 -"- @{margin}"); // ezekből mindig 2 oszlop lesz
    }

    .column-6 > div,
    .column-5 > div,
    .column-4 > div {     
        width: calc(100% / 2 -"- @{margin}");        // ezekből mindig 3 oszlop lesz
    }
        
    .column-3 > div,
    .column-2 > div {
        width: calc(100% - @margin); // ezekből mindig 1 oszlop lesz
     }
}