website/assets/sass/gallery.scss

79 lines
1.3 KiB
SCSS
Raw Permalink Normal View History

2022-09-28 20:49:59 +00:00
.gallery {
// display: flex;
// flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1rem;
}
2022-10-14 18:56:56 +00:00
2022-09-28 20:49:59 +00:00
.gallery__side {
grid-column-start: 1;
grid-column-end: 3;
}
2022-10-14 18:56:56 +00:00
.gallery__side {
margin-bottom: .5rem;
}
.gallery-tags__title {
}
2022-09-28 20:49:59 +00:00
.gallery__items-container {
grid-column-start: 3;
grid-column-end: 13;
}
.gallery__items {
display: grid;
grid-template-columns: repeat(4, minmax(13rem, 1fr));
2022-09-28 20:49:59 +00:00
grid-gap: 1rem;
}
2022-10-14 18:56:56 +00:00
2022-09-28 20:49:59 +00:00
.gallery__item {
aspect-ratio: 1;
// $size: 25rem;
// width: $size;
// height: $size;
img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
display: block;
object-fit: cover;
}
}
.gallery__nextprev {
display: flex;
justify-content: space-between;
}
@media (max-width: $lg-breakpoint) {
// .gallery__items {
// grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr))
// }
}
2022-09-28 20:49:59 +00:00
@media (max-width: $md-breakpoint) {
.gallery {
display: block;
}
.gallery__items {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
2022-09-28 20:49:59 +00:00
}
2022-10-14 18:56:56 +00:00
.gallery__side {
margin-bottom: 1rem;
}
2022-09-28 20:49:59 +00:00
}
@media (max-width: $xs-breakpoint) {
.gallery__items {
grid-template-columns: 1fr;
}
}