lsky-pro/resources/css/gallery.less
2022-02-11 16:05:57 +08:00

58 lines
961 B
Plaintext

.images-grid {
margin: 0 auto;
}
.images-grid:after {
content: '';
display: block;
clear: both;
}
.grid-sizer, .grid-item {
padding: 8px;
width: calc(50%);
}
.grid-item {
float: left;
& > div {
transition: all .3s;
&:hover {
margin-top: -5px;
box-shadow: 15.8px 21.3px 83.8px rgba(0, 0, 0, 0.07), 102px 137px 196px rgba(0, 0, 0, 0.035);
}
}
}
@media screen and (min-width: 640px) {
.grid-sizer, .grid-item {
width: calc(33.333%);
}
}
@media screen and (min-width: 768px) {
.grid-sizer, .grid-item {
width: calc(25%);
}
}
@media screen and (min-width: 1024px) {
.grid-sizer, .grid-item {
width: calc(20%);
}
}
@media screen and (min-width: 1280px) {
.grid-sizer, .grid-item {
width: calc(12.5%);
}
}
@media screen and (min-width: 1536px) {
.grid-sizer, .grid-item {
width: calc(10%);
}
}