.integrations-hero.hero.lemon {
    .hero-viewport-wrapper .hero-form-wrapper {
        width: 100%;

        .hero-form-outer-container
        {
            width: 100%;
        }
    }
}

.integrations-items {
    margin-top: var(--font-xxl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--font-md);
    justify-content: center;
    width: 100%;

    .integration-item {
        --outer-border-radius: var(--border-radius);
        --container-padding: var(--font-md);
        --inner-border-radius: calc(var(--outer-border-radius) - var(--container-padding));
        --border-color: color-mix(in srgb, white 15%, transparent);
        --bg-mix-color: var(--background);
        --bg-mix-amount: 65%;
        --box-shadow-factor: 10%;
        --box-shadow-color: var(--text-light);
        --inner-shadow-factor: 10%;
        --inner-shadow-color: var(--text-light);

        border-radius: var(--outer-border-radius);
        border: 1px solid var(--border-color);
        padding: var(--container-padding);
        background: color-mix(in srgb, var(--bg-mix-color) var(--bg-mix-amount), transparent);
        backdrop-filter: blur(200px) saturate(140%);
        box-shadow: 0 10px 30px color-mix(in srgb, var(--box-shadow-color) var(--box-shadow-factor), transparent);
        width: 32%;
        text-align: start;
        transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, padding 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        display: flex;
        align-items: stretch;
        justify-content: stretch;

        @media (max-width: 992px)
        {
            width: 48%;
        }

        @media (max-width: 768px)
        {
            width: 100%;

            .ii-inner
            {
                flex: 1;
            }
        }

        &:hover
        {
            --bg-mix-color: var(--ncs-primary);
            --box-shadow-factor: 15%;
            --box-shadow-color: var(--ncs-primary);
            --bg-mix-amount: 10%;
            --border-color: color-mix(in srgb, var(--ncs-primary) 15%, transparent);
            --inner-shadow-factor: 25%;
            --inner-shadow-color: var(--ncs-primary);
            --container-padding: calc(var(--font-md) - 6px);

            .ii-inner
            {
                background-color: color-mix(in srgb, var(--background) 75%, transparent);
                padding: calc(var(--font-md) + 6px);

                .dark-mode & {
                    background-color: color-mix(in srgb, var(--background) 25%, transparent);
                }
            }
        }

        .ii-inner
        {
            width: 100%;
            background-color: var(--background);
            padding: var(--font-md);
            border-radius: var(--inner-border-radius);
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: var(--font-md);
            box-shadow: 0 10px 20px color-mix(in srgb, var(--inner-shadow-color) var(--inner-shadow-factor), transparent);
            transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out, padding 0.2s ease-in-out;
            .integration-item-title {
                --font-size: var(--font-lg);
                --line-size: var(--font-xl);
                --gap: var(--font-xs);
                display: inline;
    
                & > * {
                    display: inline;
                    line-height: var(--line-size);
                    font-size: var(--font-size);
                }

                .ii-icon
                {
                    --scaling: 1;
                    height: var(--line-size);
                    width: auto;
                    min-width: 0;
                    min-height: 0;
                    vertical-align: bottom;
                    margin-right: var(--gap);
                    transform: scale(var(--scaling));

                    .rtl & {
                        margin-right: 0;
                        margin-left: var(--gap);
                    }

                    &.ii-icon-dark {
                        display: none;

                        .dark-mode & {
                            display: inline;
                        }
                    }

                    &.ii-icon-light {
                        display: inline;

                        .dark-mode & {
                            display: none;
                        }
                    }
                }
            }

            

            .integration-item-description
            {
                display: flex;
                flex-direction: column;
                flex: 1;
                color: var(--text);
                text-decoration: none;

                .integration-spacer
                {
                    min-height: 0;
                    flex: 1;
                }

                .inlink
                {
                    color: var(--ncs-primary);
                }
            }
        }
    }
}