mirror of
https://github.com/danbee/my-images
synced 2025-03-04 08:49:05 +00:00
37 lines
717 B
SCSS
37 lines
717 B
SCSS
ul.images {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-gap: 0.75rem;
|
|
justify-content: space-between;
|
|
|
|
li {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
img {
|
|
background-color: white;
|
|
max-width: calc(100% - 0.5rem);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
|
border-radius: 2px;
|
|
padding: 0.25rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 380px) {
|
|
ul.images { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
|
|
@media (min-width: 590px) {
|
|
ul.images { grid-template-columns: repeat(4, 1fr); }
|
|
}
|
|
|
|
@media (min-width: 820px) {
|
|
ul.images { grid-template-columns: repeat(5, 1fr); }
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
ul.images { grid-template-columns: repeat(6, 1fr); }
|
|
}
|