.tease-wrapper{
    @apply grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-[calc(var(--grid-gutter)*2)] gap-y-md xl:gap-y-lg;
    .tease{
        /* @apply mb-lg; */
        /* @TODO */
        &:nth-child(4){
            @apply max-xl:lg:hidden;
        }
    }
    &--tease-lg{
        @apply lg:grid-cols-2;
    }
}

.tease{
    @apply aspect-square overflow-hidden relative;
    .tease__img{
        transition: height .2s ease;
        @apply absolute top-0 left-0 w-full bg-grey-100 overflow-hidden;
        img{
            @apply w-full h-full object-cover;
        }
    }
    .tease__main{
        .tease-main-header{
            @apply py-3 flex justify-between text-size-sm text-grey-300;
            span{
                &:last-child{
                    @apply ml-2;
                }
            }
        }
        .tease-main-title{
            @apply  text-size-md font-bold;
        }
    }
    &:hover{
        .tease__img{
            @apply h-full !important;
        }
        .tease__main{
        }
    }
    &--lg{
        @apply aspect-auto;
        .tease__img{
            @apply aspect-[3/2] relative mb-xs;
            img{
                transition: transform ease .2s;
                @apply w-full h-full object-cover;
            }
        }
        .tease__main{
            .tease-main-title{
                @apply md:pr-xs text-size-xl mb-xs font-normal;
            }
        }
        .tease__excerpt{
            @apply mb-0 md:pr-xs;
            p{
                @apply mb-0;
            }
        }
        &:hover{
            .tease__img{
                @apply h-auto !important;
                img{
                    transform: scale(1.05);
                }
            }
        }
    }
}

.tease-event{
    @apply lg:grid grid-cols-12 gap-x-[calc(var(--grid-gutter)*2)] py-xs border-t border-grey-200;
    ;
    &__date{
        @apply text-size-md-lg font-bold col-span-2;
        span{
            @apply lg:block;
            + span{
                @apply ml-2 lg:ml-0;
            }
        }
    }
    &__info{
        @apply flex flex-col justify-between text-size-md-lg col-span-4 mb-sm lg:mb-0;
        span{
            @apply block;
            + span{
                @apply text-grey-300;
            }
            span{
                @apply inline-block mr-3;
            }
        }
    }
    &__content{
        @apply col-span-6;
    }
    &__location{
        @apply text-base mt-xs lg:mt-0;
    }
    &__title{
        @apply font-bold text-size-md-lg mb-0;
    }
    &__subtitle{
        @apply font-bold mt-xxs mb-0;
    }
    &__excerpt{
        @apply mt-xs mb-0;
    }
    &--canceled{
        .tease-event__title, .tease-event__subtitle, .tease-event__excerpt{
            @apply text-grey-300;
        }
        .tease-event__info{
            span{
                @apply text-grey-300 line-through;
                span{
                    text-decoration-line: none;
                    @apply text-black;
                }
            }
        }
    }
    &-ongoing{
        @apply py-5;
        &:first-child{
            @apply pt-0;
            span{
                @apply text-size-base;
            }
        }
        &:last-child{
            @apply pb-0;
        }
        &:not(:last-child){
            @apply border-b border-grey-200;
        }
        p{
            @apply font-bold text-size-base mb-0;
            span{
                @apply text-grey-300 ml-3;
            }
        }
    }
    &:last-child{
        @apply border-b;
    }
}