/* Integration Cards layout */

.integrationCards_5DfZc {
    flex-flow: column nowrap;
    gap: var(--sp-spacing-600);
}

@media screen and (min-width: 701px) {
    .integrationCards_5DfZc {
        flex-flow: row wrap;
        gap: var(--sp-spacing-700);
    }
}

/*
 * Progressively enhance the card responsiveness using subgrid.
 * Where subgrid is supported we can use it to keep the cards a uniform size
 * without subgrid the cards are sized depending on the flow of content and flex.
 */
@supports (grid-template-columns: subgrid) {
    .integrationCards_5DfZc {
        display: grid;
        grid-template-columns: 1fr;
    }

    @media screen and (min-width: 701px) {
        .integrationCards_5DfZc {
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        }
    }
}

/* Integration CTA */

.integrationCard_UGVJy {
    min-width: 230px;
    max-width: 330px;
    flex: calc(33% - 40px) 1 1;
    height: -moz-fit-content;
    height: fit-content;
    box-shadow: var(--sp-shadow-base);
}

.integrationCard_UGVJy > .content_Q9zbp {
    flex-direction: column;
    gap: var(--sp-spacing-600);
}

.integrationCard_UGVJy .body_QM88U,
.integrationCard_UGVJy .footer_s3DxX,
.integrationCard_UGVJy .header_APV0p {
    flex-direction: column;
    gap: var(--sp-spacing-200);
}

.integrationCard_UGVJy .dataBody_Mglrq {
    gap: var(--sp-spacing-400);
}

.integrationCard_UGVJy .image_4-AEH {
    border-radius: var(--sp-radius-500);
    overflow: hidden;
    width: 100%;
}

.image_4-AEH > img {
    background: linear-gradient(to bottom, transparent 8%, var(--sp-color-bg-card) 8%) 2px 2px / 8px
            8px repeat,
        linear-gradient(to right, lightgrey 8%, var(--sp-color-bg-card) 8%) 2px 2px / 8px 8px repeat;
    width: 100%;
    height: auto;
}

.image_4-AEH > svg {
    background: var(--sp-color-bg-card);
    width: 100%;
    height: auto;
}

.integrationCard_UGVJy .dataItem_-QEdK {
    flex-direction: row;
    gap: var(--sp-spacing-200);
}

.integrationCard_UGVJy .icon_YrNzh {
    width: var(--sp-size-icon-200);
    height: var(--sp-size-icon-200);
    margin-top: -2px;
    color: var(--icon-color, currentcolor);
}

.integrationCard_UGVJy .titleWithSub_-POgw {
    flex-direction: column;
    gap: var(--sp-spacing-100);
}

.integrationCard_UGVJy.pending_cmXq2 .icon_YrNzh {
    color: var(--sp-color-primary-300);
}

.integrationCard_UGVJy.success_8Ad62 .icon_YrNzh {
    background: var(--sp-color-bg-success);
    color: var(--sp-color-text-success);
    border-radius: var(--sp-radius-circle);
    outline-offset: -1px;
    outline: var(--sp-spacing-100) solid var(--sp-color-bg-success);
}

.integrationCard_UGVJy.disabled_iF-dR::before {
    display: none;
}

/*
 * Progressively enhance the card responsiveness using subgrid.
 * Where subgrid is supported we can use it to keep the cards a uniform size
 * without subgrid the cards are sized depending on the flow of content and flex.
 */
@supports (grid-template-columns: subgrid) {
    .integrationCard_UGVJy {
        display: grid;
        grid-template-columns: subgrid;
    }
}

.header_APV0p {
    position: relative;
}

.badge_cK-kZ {
    position: absolute;
    top: var(--sp-spacing-250);
    right: var(--sp-spacing-250);
}

.title_QlXWG {
    flex-direction: row;
    gap: var(--sp-spacing-200);
    align-items: center;
}

.title_QlXWG .icon_YrNzh {
    width: var(--sp-size-icon-200);
    height: var(--sp-size-icon-200);
    margin-top: -2px;
    color: var(--icon-color, currentcolor);
}

@media screen and (min-width: 1025px) {
    .details_ljTjj {
        /* To help cards keep a more consistent size we'll set min height to 3 lines of text */
        min-height: calc(
            var(--sp-typography-ui-small-line-height) * var(--sp-typography-ui-small-font-size) * 3
        );
    }
}