.results {
    @apply container mx-auto mt-3 p-1 grid gap-1 md:gap-1.5 2xl:gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6  items-start;
    &:not(.tab-content) {
        @apply min-h-screen;
    }

    .card {
        @apply flex flex-col relative aspect-card rounded overflow-hidden bg-opacity-0  hover:bg-opacity-50; //transition duration-300;
        transition: opacity 0.5;
        &-image {
            @apply  relative inset-0 w-full aspect-2/3;
            img {
                @apply  absolute inset-0 w-full h-full;// bg-opacity-50 opacity-0;
                &.lazy {
                    @apply opacity-30;// transition-opacity duration-75
                }
                &.lazy.loaded {
                    @apply opacity-100;// transition-opacity duration-200;
                }
                transition: 1s filter linear;
            will-change: filter;
            :hover {
                filter: blur(2px);

            }
            }

        }

        :hover {
            .card-overlay {
                background-color: rgb(0 0 0 / 0.5);
            }
            .card-play {
                opacity: 1;
                z-index: 1;
            }
        }

        &-title {
            @apply relative  bottom-0 w-full   p-1 m-0 bg-black bg-opacity-80 h-auto text-white;
            a {
                @apply text-center text-sm font-semibold w-full h-full line-clamp-1 inset-0 flex items-center justify-center;
                span {
                    @apply text-center line-clamp-1 sm:line-clamp-1;
                }
            }
        }

        &-play {
            @apply absolute left-1/2 top-1/2 text-primary;
            opacity: 0;
            z-index: -10;
            transition: 0.3s opacity ease;
            will-change: opacity;
            transform: translate(-50%, -50%) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
        }
        &-overlay {
            @apply  absolute inset-0 w-full h-full bg-black bg-opacity-10 ;
            transition: 0.2s background-color ease;
            will-change: background-color;
            :hover {
                filter: blur(2px);
            }
            // @apply  group-hover:backdrop-blur-[2px] group-hover:bg-opacity-50;
            // transition: opacity 0.5;
        }
    }
}