/* 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;
}

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

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

.integrationCard_UGVJy .icon_YrNzh {
    margin-top: -2px;
    color: var(--icon-color, currentcolor);
}

.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;
    }
}

.iconTitle_kQIY5 {
    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
        );
    }
}