diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 85c99319..df9a1c5e 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -18,6 +18,8 @@ .cards.block.mobile-slide .cards-list { flex-flow: row nowrap; + align-items: stretch; + gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; /* Firefox */ @@ -99,7 +101,7 @@ .cards.block.mobile-slide .cards-item .card-body { padding: 0 30px; - height: 90px; + min-height: 90px; } .cards.block.mobile-slide .cards-item .card-body h4, @@ -143,12 +145,9 @@ flex-direction: column; align-items: center; justify-content: center; - min-width: 250px; flex: 0 0 auto; - margin-right: 20px; text-align: center; border: 1px solid var(--secondary-accent); - height: 100%; scroll-snap-align: start; } @@ -162,13 +161,11 @@ } .cards.block.mobile-slide.icons .cards-list .cards-item { - flex-direction: column; - width: 90%; + width: 75%; } .cards.block.icons .cards-list .cards-item .card-icon { margin-top: .5em; - margin-right: 1em; } .cards.block.icons .cards-list .cards-item .card-icon .icon { @@ -191,7 +188,7 @@ .cards.block.icons .cards-list .cards-item .card-body p { color: var(--body-color); - font-size: var(--body-font-size-s); + font-size: var(--body-font-size-xs); letter-spacing: var(--letter-spacing-xs); margin-bottom: 0; } @@ -248,7 +245,8 @@ } .cards.block.mobile-slide .cards-list { - flex-flow: column unset; + flex-flow: column; + align-items: center; overflow-x: unset; } @@ -264,10 +262,20 @@ border-bottom: 1px solid var(--secondary-medium-grey); } + .cards.block.mobile-slide .cards-list .cards-item:last-of-type { + border-bottom: none; + } + .cards.block.mobile-slide.icons .cards-list .cards-item { flex-direction: row; } + .cards.block.icons .cards-list .cards-item .card-icon { + margin-top: .5em; + margin-right: 1em; + } + + .cards.block.shade-icon .cards-list { flex-direction: row; column-gap: 20px; @@ -330,6 +338,10 @@ font-size: var(--heading-font-size-xs); } + .cards.block.cards-2-cols .cards-list .cards-item { + flex: 0 1 calc(50% - 10px); + } + .cards.block.cards-2-cols .cards-list .cards-item .card-image picture { padding-bottom: 45%; } @@ -353,6 +365,10 @@ padding: 0 25px 54px; } + .cards.block.mobile-slide .cards-list .cards-item:last-of-type { + border-bottom: 1px solid var(--secondary-medium-grey); + } + } @media (min-width: 1200px) {