.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;
        }
        &:not(:has(*)){
            &::after{
                content: '';
                /* background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 160'%3E%3Cpath d='M16.313 18.92v-2.29h4.622V2.29h-4.622V0h12.376v2.29h-4.622v14.34h4.622v2.29H16.312ZM8.977 31.57H0v2.816h8.977v-2.817ZM26.97 31.57h-8.978v2.816h8.977v-2.817ZM45 31.57h-9.016v2.816H45v-2.817ZM22.507 66.221c-4.431 0-5.921-1.614-5.921-5.781V47.038h3.132v13.815c0 2.252 1.032 2.928 2.789 2.928 1.604 0 2.788-.6 2.788-2.928V47.038h3.133V60.44c0 4.017-1.834 5.781-5.883 5.781h-.038ZM8.977 78.61H0v2.816h8.977v-2.817ZM26.97 78.61h-8.978v2.816h8.977v-2.817ZM45 78.61h-9.016v2.816H45v-2.817ZM26.695 112.96l-.955-3.942h-6.494l-.955 3.942H14.93l5.5-18.883h4.126l5.5 18.883h-3.36Zm-4.202-17.156-2.635 10.699h5.271l-2.636-10.7ZM8.977 125.612H0v2.817h8.977v-2.817ZM26.97 125.612h-8.978v2.817h8.977v-2.817ZM45 125.612h-9.016v2.817H45v-2.817ZM24.44 160h-3.858l-6.035-18.921h3.552l4.432 16.931 4.43-16.931h3.515L24.441 160Z' fill='%23000'/%3E%3C/svg%3E"); */
                @apply block absolute position-center-vertical w-full h-[60%] bg-contain bg-no-repeat bg-center;
            }
        }
    }
    .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;
    }
}