@media screen and (max-width: 480px){
	#grid[data-columns]::before {
		content: '1 .column.size-1of1';
	}
        [class*='icon-']:before{font-size:1.7em;}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	#grid[data-columns]::before {
		content: '2 .column.size-1of2';
	}
        [class*='icon-']:before{font-size:1.3em;}
}
@media screen and (min-width: 768px) and (max-width: 969px){
	#grid[data-columns]::before {
		content: '3 .column.size-1of3';
	}
        [class*='icon-']:before{font-size:1.2em;}
}
@media screen and (min-width: 969px) {
	#grid[data-columns]::before {
		content: '4 .column.size-1of4';
	}
         [class*='icon-']:before{font-size:1.3em;}
}
/* 
@media screen and (min-width: 969px) and (max-width:1400px){
        [class*='icon-']:before{font-size:2.1vw;}
    
}
*/
/* Again, you’re free to use and define the classes: */

.wrapper-items {
 padding:0;
 margin-top:-5px;
 margin-left:-5px;
 margin-right:-5px;
 margin-bottom:-8px
}

.wrapper-items:after {
  content: "";
  display: table;
  clear: both;
}
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
.size-1of4 { width: 25%; }

.items-filtered {
    background:#fff;
   /*min-height:300px;*/
    /*height:100%;*/
    margin:5px 5px 10px 5px;
    
}

.item-container-padded {
    padding:10px 10px 0 10px;
}