.cp-carousel__card {
    $minCardWidth: 212px;
    display: flex;
    flex-direction: column;
    // set the size of the cards to be almost all the width but allow the next card to peek through
    flex: 0 0 max($minCardWidth, calc(100% - $carousel-gap - 20%));
    // set the size of the cards to be almost half the width but allow the third card to peek through
    @include oGridRespondTo($from: S) {
        flex-basis: max($minCardWidth, calc(50% - $carousel-gap - 10%));
    }
    @include oGridRespondTo($from: L) {
        flex-basis: max($minCardWidth, calc(50% - $carousel-gap--wide - 10%));
    }
    font-family: var(--o3-type-body-base-font-family);
    font-size: var(--o3-type-body-base-font-size);
    line-height: var(--o3-type-body-base-line-height);
    font-weight: var(--o3-type-body-base-font-weight);

    figure {
        order: -1;
        margin-block-end: var(--o3-spacing-4xs);
    }

    figcaption {
        display: none;
    }

    h2, h3, p {
        margin: 0 0 var(--o3-spacing-4xs);
    }

    .cp-carousel__card__additional {
        color: var(--o3-color-palette-black-60);
    }
}