.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; } }