<!--РАНДОМ БЛОКА TM101 + ПОКАЗ ТОЛЬКО 4 ПЕРСОНЫ -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        
        const rotateBlock = document.querySelector('.t524');
        const randomColumns = rotateBlock.querySelectorAll("ul .t-col");
        let columnsArrayRnd = [];
        
        for(let i=0; i<randomColumns.length; i++){
            columnsArrayRnd.push(i);  
        };
        

        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                let j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            } 
        };
        
        shuffle(columnsArrayRnd);

        
        
        function rotateColumnInBlock(){
            for(let i=0; i<randomColumns.length; i++){
                randomColumns[i].style.order = columnsArrayRnd[i];
            };
            rotateBlock.classList.add('show-rotate-block');
        };
        
        rotateColumnInBlock();
 
    })();    
});    
</script>

<style>

.t524 ul .t-col {
    display: none;
}
.t524 .t-col[style="order: 1;"],
.t524 .t-col[style="order: 2;"],
.t524 .t-col[style="order: 3;"],
.t524 .t-col[style="order: 4;"]
{
    display: inline;
}


.t524{
    opacity: 0;
}
.t524.show-rotate-block{
    opacity: 1;
}

.t524 .t-container{
    row-gap: 5vw;
}
.t524 .t-container:after, 
.t524 .t-container:before {
    display: none;
}
.t524 .t-col {
    margin-top: 0;
}
 
</style>