diff --git a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss index 29088e4365..9816a46fbd 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss @@ -27,10 +27,7 @@ overflow-x: hidden; box-sizing: border-box; gap: tokens.bpk-spacing-sm(); - - // Negative margin to ensure box-shadow of content is not cut off - margin-block: -(tokens.bpk-spacing-lg()); - padding-block: tokens.bpk-spacing-lg(); + margin-inline: -1 * tokens.bpk-spacing-md(); scroll-snap-stop: always; scroll-snap-type: x mandatory; scrollbar-width: none; @@ -63,30 +60,32 @@ @include breakpoints.bpk-breakpoint-mobile { // On mobile, if there is more than one card in the viewport, the last card only shows partially, so subtract 0.8 when do the calculation - flex: 0 0 - calc( - ( - 100% - - ( - tokens.bpk-spacing-md() * - (var(--initially-shown-cards, 3) - 1) - ) - ) / - max(1, (var(--initially-shown-cards, 3) - 0.8)) - ); - - &:first-child { - padding-left: tokens.bpk-spacing-sm(); - - @include utils.bpk-rtl { - padding-right: tokens.bpk-spacing-sm(); - padding-left: tokens.bpk-spacing-md(); - } - } + flex-basis: calc( + ( + 100% - + ( + tokens.bpk-spacing-md() * + (var(--initially-shown-cards, 3) - 1) + ) + ) / + max(1, (var(--initially-shown-cards, 3) - 0.8)) + ); } } } + &__row { + &__card { + flex-basis: calc( + ( + 100% - + (tokens.bpk-spacing-sm() * (var(--initially-shown-cards, 3) - 1)) + ) / + var(--initially-shown-cards, 3) + ); + } + } + &__rail { -webkit-overflow-scrolling: touch; }