.desti-themes-grid {
    &, &.wp-block-desti-themes-grid {
        max-width: var(--spacing-content-width, 1160px);
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1px;
        background: linear-gradient(to right, var(--desti-gray-200) calc(100% - 2px), white calc(100% - 2px), white 100%);
        padding: 0;

        @media screen and (max-width: 1023px) {
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr) );
        }

        .theme-grid-item {
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;


            &:hover {
                background-color: var(--desti-gray-100);
            }

            .icon {
                height: 12.5rem;
                display: flex;
                justify-content: center;
                align-items: center;

                @media screen and (max-width: 1023px) {
                    height: 10rem;
                }
            }

            .content {
                padding: 1.5rem;
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
                align-items: center;
                text-align: center;

                .in-numbers {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 1.5rem;
                }

                h3 {
                    font-weight: 500;
                    font-size: 1.75rem;
                    line-height: 2.25rem;
                }

                .theme-card-title {
                    font-weight: 500;
                    font-size: 1.25rem;
                    line-height: 1.75rem;
                }

                .short-description {
                    height: 5rem;
                    display: flex;
                    align-items: center;
                }
            }

            .arrow-button-wrapper {
                position: relative;
                height: 2rem;
                width: 100%;

                &.large {
                    height: 3rem;
                }
            }

            .arrow-button {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                transition: all 0.1s ease;
            }

            .view-all-icon svg {
                width: 132px;
                height: 132px;
                display: block;
                margin: auto;
                position: relative;

                path {
                    transition: transform 0.4s ease;
                }
            }

            &:hover {
                .arrow-button {
                    left: calc(100% - 50px);
                    transform: translateX(0);
                }

                .view-all-icon {
                    svg path:nth-of-type(1) {
                        transform: translate(-2px, -2px);
                    }

                    svg path:nth-of-type(2) {
                        transform: translate(2px, -2px);
                    }

                    svg path:nth-of-type(3) {
                        transform: translate(-2px, 2px);
                    }

                    svg path:nth-of-type(4) {
                        transform: translate(2px, 2px);
                    }
                }
            }


        }

    }
}

/* A — Harmonised hover: subtle lift + shadow (like the destination cards), in
   addition to the existing background change. The card pops above the grid. */
.desti-themes-grid .theme-grid-item {
    transition: background-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.desti-themes-grid .theme-grid-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -18px rgba(10, 22, 60, 0.45);
    z-index: 2;
}

/* B — Soft brand-tinted pastille behind each theme icon to frame them
   consistently (the "view all" animated icon is left untouched). */
.desti-themes-grid .theme-grid-item .icon:not(.view-all-icon) {
    position: relative;
}

.desti-themes-grid .theme-grid-item .icon:not(.view-all-icon)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8rem;
    height: 8rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 115, 255, 0.07);
    z-index: 0;
}

.desti-themes-grid .theme-grid-item .icon:not(.view-all-icon) > * {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .desti-themes-grid .theme-grid-item:hover {
        transform: none;
    }
}