#portfolio {  
margin: 1rem 0;
-webkit-column-count: 4; 
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 0.4rem;
-moz-column-gap: 0.4rem;
column-gap: 0.4rem;
X-webkit-column-width: 33.33333333333333%;
X-moz-column-width: 33.33333333333333%;
Xcolumn-width: 33.33333333333333%;
}
@media screen and (max-width: 1024px) {
#portfolio {  
margin: 1rem 0;
-webkit-column-count: 3; 
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 0.4rem;
-moz-column-gap: 0.4rem;
column-gap: 0.4rem;
X-webkit-column-width: 33.33333333333333%;
X-moz-column-width: 33.33333333333333%;
Xcolumn-width: 33.33333333333333%;
}
}
@media screen and (max-width: 700px) {
#portfolio {  
margin: 1rem 0;
-webkit-column-count: 2; 
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 0.4rem;
-moz-column-gap: 0.4rem;
column-gap: 0.4rem;
X-webkit-column-width: 33.33333333333333%;
X-moz-column-width: 33.33333333333333%;
Xcolumn-width: 33.33333333333333%;
}
}
@media screen and (max-width: 400px) {
#portfolio {  
margin: 1rem 0;
-webkit-column-count: 1; 
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 0.4rem;
-moz-column-gap: 0.4rem;
column-gap: 0.4rem;
X-webkit-column-width: 33.33333333333333%;
X-moz-column-width: 33.33333333333333%;
Xcolumn-width: 33.33333333333333%;
}
}
.tile { 
display: none;
}
.scale-anm {
width: 100%;  
}
.tile img {
max-width: 100%; 
height: auto;
display: block; 
width: 100%;
}  .gallery .images img {
width: 100%;
transition: transform 0.9s ease;
cursor:pointer;
}
.gallery .images .img:hover img {
transform: scale(0.95);
}