48 lines
750 B
CSS
48 lines
750 B
CSS
:root {
|
|
--gallery-spacing: var(--spacing);
|
|
--gallery-base-height: 240px;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
:root {
|
|
--gallery-base-height: 200px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
:root {
|
|
--gallery-base-height: 160px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
:root {
|
|
--gallery-base-height: 120px;
|
|
}
|
|
}
|
|
|
|
.gallery {
|
|
padding: var(--gallery-spacing);
|
|
padding-right: 0;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.gallery-item {
|
|
margin-right: -0.5px;
|
|
}
|
|
|
|
.gallery-item picture {
|
|
margin: var(--gallery-spacing);
|
|
|
|
display: block;
|
|
}
|
|
|
|
.gallery-item img {
|
|
display: block;
|
|
height: calc(var(--gallery-base-height) * 1.2); /* 320px is native size on desktop, 160px is native size on mobile */
|
|
width: auto;
|
|
object-fit: cover;
|
|
}
|