body{
color: white;
background: #fafafa;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
}
.container{
margin: 0px;
}
.thumbnail{
width: 100%;
}
.thumbdiv{
margin: 20px 0;
padding: 0 10px;
}
#portfolio{
height: auto;
display: inline-block;
}
#about{
height: 250px;
background: #303746;
}
/* Again, you’re free to use and define the classes: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
.size-1of4 { width: 25%; }
/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of3 { width: 33.333%; }
#grid[data-columns]::before {
content: '3 .column.size-1of3';
}
@media screen and (max-width: 480px){
#grid[data-columns]::before {
content: '1 .column.size-1of1';
}
}
@media screen and (min-width: 481px) and (max-width:819px) {
#grid[data-columns]::before {
content: '2 .column.size-1of2';
}
}
@media screen and (min-width: 820px) and (max-width: 1299px) {
#grid[data-columns]::before {
content: '3 .column.size-1of3';
}
}
@media screen and (min-width: 1300px){
#grid[data-columns]::before {
content: '4 .column.size-1of4';
}
}