35 lines
818 B
SCSS
35 lines
818 B
SCSS
.gallery {
|
|
--gallery-width: 80rem;
|
|
--gallery-columns: 3;
|
|
grid-template-columns: repeat(var(--gallery-columns), calc(var(--gallery-width) / var(--gallery-columns)));
|
|
grid-auto-rows: max-content;
|
|
align-items: center;
|
|
justify-items: center;
|
|
display: grid;
|
|
}
|
|
|
|
.galleryImage {
|
|
grid-column: span 1;
|
|
margin: 0.5rem;
|
|
max-height: calc(((6.5 / 10) * (var(--gallery-width) / var(--gallery-columns))) - 1rem);
|
|
overflow: hidden;
|
|
|
|
& > img {
|
|
width: calc((var(--gallery-width) / var(--gallery-columns)) - 1rem);
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 80rem) {
|
|
.gallery {
|
|
--gallery-width: 90vw;
|
|
--gallery-columns: 2;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 50rem) {
|
|
.gallery {
|
|
--gallery-width: 90vw;
|
|
--gallery-columns: 1;
|
|
}
|
|
}
|