@media screen and (max-width: 480px){
.masonary[data-columns]::before {
content: '1 .column.size-1of1';
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
.masonary[data-columns]::before {
content: '2 .column.size-1of2';
}
}
@media screen and (min-width: 769px) {
.masonary[data-columns]::before {
content: '3 .column.size-1of3';
}
} .masonary{ margin:0 -10px 0 -10px; }
.column {float: left; }
.size-1of4 {width: 25%; padding:0 10px;}
.size-1of3 {width: 33.333%; padding:0 10px; }
.size-1of2 {width: 50%; padding:0 10px; }
.size-1of1 {width: 100%; padding:0 10px; }