studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Fix card__images display when multiple images

Browse source
This commit is contained in:
Timothée Goguely 2024-11-20 16:02:20 +01:00
parent 5da3da90a0
commit 3d62eb029e
2 changed files with 14 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/assets/css/src/2.blocks.card.css
View file

@ -45,7 +45,7 @@
transform: translate(-50%, -50%);
z-index: 0;
}
.card__images[data-count] {
.card__images[data-count]:not([data-count="1"]) {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 50%);
gap: 4px;
@ -53,12 +53,19 @@
.card__images[data-count] > :first-child {
grid-row-end: span 2;
}
.card__images[data-count="2"] > :last-child {
grid-row-end: span 2;
}
.card__images > img {
height: 100%;
width: 100%;
}
.card__images[data-count]::after {
content: '+'attr(data-count);
.card__images > img[src$='.svg'],
.card__images > img[src$='.png'] {
background-color: var(--color-white);
}
.card__images[data-plus]::after {
content: '+'attr(data-plus);
position: absolute;
bottom: var(--space-8);
right: var(--space-8);