You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
1.5 KiB
89 lines
1.5 KiB
|
|
|
|
.album {
|
|
padding: var(--space-2);
|
|
|
|
.img {
|
|
background-size: cover;
|
|
background-position: center center;
|
|
}
|
|
|
|
.inner {
|
|
padding: var(--space-4);
|
|
background-color: var(--primary);
|
|
color: var(--primary-txt);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
@supports (grid-template-columns: repeat(5, 1fr)) {
|
|
|
|
.album {
|
|
padding: var(--space-2);
|
|
display: grid;
|
|
grid-gap: var(--space-2);
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-template-rows: repeat(3, 30vh);
|
|
grid-auto-flow: dense;
|
|
|
|
.img {
|
|
background-size: cover;
|
|
background-position: center center;
|
|
}
|
|
|
|
.img:first-child,
|
|
.img:nth-child(2),
|
|
.img:nth-child(6),
|
|
.img:nth-child(8),
|
|
.inner {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.img:nth-child(3) {
|
|
grid-column: 5;
|
|
grid-row: 1 / 3;
|
|
}
|
|
|
|
.inner {
|
|
grid-column: 3 / 5;
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
|
|
@include mq($until: lg) {
|
|
|
|
.album {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(5, 20vh);
|
|
|
|
.img:first-child,
|
|
.img:nth-child(7),
|
|
.img:nth-child(8) {
|
|
grid-column: span 1;
|
|
}
|
|
|
|
.img:nth-child(2),
|
|
.img:nth-child(4),
|
|
.img:nth-child(6),
|
|
.inner {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.img:nth-child(3) {
|
|
grid-column: 3;
|
|
grid-row: 2 / 4;
|
|
}
|
|
|
|
.inner {
|
|
grid-column: span 3;
|
|
grid-row: span 5;
|
|
}
|
|
|
|
}
|
|
}
|
|
} |