section.ms-text-image-grid
{
    padding: var(--section-padding);
}

.ms-text-image-grid :where(.accent, .highlight) {
    color: var(--ncs-primary);
}

.ms-text-image-grid {
    &>.container {
        display: flex;
        flex-direction: column;

        & > .cta
        {
            margin-top: 2.5rem;
        }

        &>.ms-text-image-grid-items {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--font-lg);
            width: 100%;

            &[data-cols="1"] {
                grid-template-columns: 1fr;
            }

            &[data-cols="3"] {
                grid-template-columns: repeat(3, 1fr);
            }

            &>.ms-tig-item {
                &:not(.scroll-intersecting)
                {
                    opacity: 0;
                    transform: translateY(20px);
                }
                &.scroll-intersecting
                {
                    opacity: 1;
                    transform: translateY(0);
                    transition-property: opacity, transform;
                    transition-duration: 0.4s;
                    transition-timing-function: ease-out;
                }

                &>.ms-tig-item-inner {
                    --msi-primary: var(--ncs-cc-primary);
                    --msi-primary-contrast: var(--ncs-cc-primary-contrast);
                    --msi-container-weak: var(--ncs-cc-container-weak);
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    align-items: stretch;
                    border-radius: var(--border-radius-small);
                    overflow: hidden;
                    text-align: start;
                    background-color: var(--ncs-container-weak);
                    transition: transform 0.2s ease;

                    & > .ms-tig-item-text {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        gap: var(--font-xs);
                        padding: 28px;
                        flex: 1 1 0;
                        min-width: 0;

                        & > .ms-tig-item-title {
                            color: var(--ncs-cc-text);
                            font-size: var(--font-md);
                            font-weight: var(--font-weight-bold);
                            line-height: 1.3;
                            margin: 0 0 8px 0;

                            & > .ms-tig-item-title-text {
                                line-height: inherit;
                                font-size: inherit;
                                display: block;
                            }
                        }

                        & > .ms-tig-item-description {
                            font-size: var(--font-sm);
                            color: var(--text-faded);
                            line-height: 1.6;
                            margin: 0;
                        }
                    }

                    & > .ms-tig-item-image-wrap {
                        flex: 0 0 55%;
                        align-self: stretch;
                        overflow: hidden;
                        border-start-start-radius: var(--border-radius-small);
                        border-end-start-radius: var(--border-radius-small);

                        & > .ms-tig-item-image {
                            width: 100%;
                            height: 100%;
                            min-height: 100%;
                            object-fit: cover;
                            display: block;
                        }
                    }
                }

                &:hover > .ms-tig-item-inner {
                    transform: translateY(-10px);
                }
            }
        }
    }

    &[data-use-cta="false"] > .container > .cta {
        display: none;
    }

    &.tig-horizontal > .container {
        flex-direction: row;
        align-items: center;
        gap: clamp(25px, 4vw, 50px);

        & > .section-header {
            flex: 1 1 0;
            max-width: 540px;
            margin-bottom: 0;
            text-align: start;
            align-items: flex-start;

            & > .cta {
                margin-top: 1.5rem;
                align-self: flex-start;
            }
        }

        & > .ms-text-image-grid-items {
            flex: 1 1 0;
            grid-template-columns: repeat(2, 1fr);
        }
    }

    &.tig-horizontal.tig-bento > .container > .ms-text-image-grid-items {
        grid-template-columns: 1fr 1fr;
        gap: var(--font-lg);

        & > .ms-tig-item:first-child {
            grid-column: 1 / -1;

            & > .ms-tig-item-inner > .ms-tig-item-image-wrap {
                flex-basis: 55%;
            }
        }
    }

    &.tig-bento:not(.tig-horizontal) > .container > .ms-text-image-grid-items {
        grid-template-columns: 1fr 1fr;
        gap: var(--font-lg);

        & > .ms-tig-item:first-child {
            grid-column: 1;
            grid-row: 1 / span var(--tig-rows, 1);

            & > .ms-tig-item-inner {
                flex-direction: column;

                & > .ms-tig-item-image-wrap {
                    flex: 1 1 auto;
                    width: 100%;
                    order: -1;
                    min-height: 0;
                    border-start-start-radius: 0;
                    border-end-start-radius: 0;

                    & > .ms-tig-item-image {
                        height: 100%;
                        min-height: 0;
                    }
                }

                & > .ms-tig-item-text {
                    flex: 0 0 auto;
                }
            }
        }

        & > .ms-tig-item:not(:first-child) {
            grid-column: 2;
        }
    }

    &.tig-horizontal.tig-bento > .container > .ms-text-image-grid-items > .ms-tig-item:not(:first-child) > .ms-tig-item-inner {
        flex-direction: column;

        & > .ms-tig-item-image-wrap {
            flex: none;
            width: 100%;
            order: -1;
            border-radius: var(--border-radius-small);
            position: relative;
            z-index: 1;
            margin-bottom: -1.5rem;

            & > .ms-tig-item-image {
                aspect-ratio: 2 / 1;
                height: auto;
                min-height: 0;
            }
        }

        & > .ms-tig-item-text {
            position: relative;
            z-index: 0;
            padding-top: calc(28px + 1.5rem);
        }
    }

    &.tig-narwhal > .container > .ms-text-image-grid-items > .ms-tig-item > .ms-tig-item-inner,
    &.tig-narwhal-sanguine > .container > .ms-text-image-grid-items > .ms-tig-item > .ms-tig-item-inner {
        background-color: var(--ncs-transcription-container-strong-dark);
    }

    &.tig-colored-backgrounds > .container > .ms-text-image-grid-items > .ms-tig-item > .ms-tig-item-inner {
        background-color: color-mix(in srgb, var(--msi-primary) 10%, transparent);

        .ms-tig-item-description {
            color: var(--ncs-cc-text-faded);
        }
    }
}

:where(.bg-ncs-weak, .bg-ncs-strong) .ms-text-image-grid:not(.tig-colored-backgrounds) > .container > .ms-text-image-grid-items > .ms-tig-item > .ms-tig-item-inner {
    background-color: var(--background);
}

@media (max-width: 991px) {
    .ms-text-image-grid > .container > .ms-text-image-grid-items {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .ms-text-image-grid.tig-bento > .container > .ms-text-image-grid-items > .ms-tig-item {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .ms-text-image-grid.tig-horizontal > .container {
        flex-direction: column;
        align-items: stretch;
    }

    .ms-text-image-grid.tig-horizontal > .container > .section-header {
        max-width: none;
        width: 100%;
        margin-bottom: var(--font-lg);
    }
}

@media (max-width: 600px) {
    .ms-text-image-grid > .container > .ms-text-image-grid-items > .ms-tig-item > .ms-tig-item-inner {
        flex-direction: column;

        & > .ms-tig-item-image-wrap {
            flex: none !important;
            width: 100%;
            order: -1;
            border-start-start-radius: 0;
            border-end-start-radius: 0;

            & > .ms-tig-item-image {
                aspect-ratio: 2 / 1;
                height: auto;
                min-height: 0;
            }
        }
    }
}