.tease-wrapper{
    @apply grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-5 gap-y-14;
    .tease{
        /* @TODO */
        &:nth-child(4){
            @apply max-xl:lg:hidden;
        }
    }
}

.tease{
    &__title{
        @apply text-size-xl mb-0;
    }
    &__img{
        @apply aspect-[3/2];
        img{
            @apply w-full h-full object-cover object-top;
        }
    }
    /* @todo */
    &--sm{
        @apply aspect-square overflow-hidden relative;
        .tease__img{
            transition: height .2s ease;
            @apply absolute top-0 left-0 w-full bg-grey-100;
        }
        .tease__main{
            .tease-main-header{
                @apply py-3 flex justify-between text-size-sm text-grey-300;
            }
            .tease-main-title{
                @apply  text-size-md font-bold;
            }
        }
        &:hover{
            .tease__img{
                @apply h-full !important;
            }
            .tease__main{
            }
        }
    }
}