.block-marquee-images{
    --marquee-item-width: 66vw;
    @screen md{
        --marquee-item-width: 40vw;
    }
    @screen lg{
        --marquee-item-width: 33vw;
    }
    @screen xl{
        --marquee-item-width: 25vw;
    }
    /* @apply overflow-hidden mb-5; */
    @apply overflow-x-clip;
    @apply mb-base -ml-[calc(var(--grid-gutter)*2)] lg:ml-0;
    &__inner{
        @apply flex;
        .block-marquee-images-item{
            width: var(--marquee-item-width);
            @apply mr-[calc(var(--grid-gutter)*2)] aspect-square;
            img{
                @apply w-full h-full object-cover;
            }
        }
    }
    &.is-hovered{
        @apply relative z-10;
    }
}

/* .marquee-card{
    @apply relative bg-grey-100 p-4;
    &--black{
        @apply bg-black;
        p, span{
            @apply text-white;
        }
    }
    &__content{
        @apply aspect-square flex flex-col justify-between;
    }
    .marquee-card-header, .marquee-card-main{
        @apply relative z-10;
    }
    .marquee-card-header{
        @apply flex justify-between text-grey-300;
    }
    .marquee-card-date{
        @apply text-size-sm;
    }
    .marquee-card-title{
        @apply text-size-md font-bold;
    }
    .marquee-card-bg{
        @apply absolute left-0 top-0 w-full h-full scale-125 origin-center opacity-0 pointer-events-none bg-black;
        img{
            @apply w-full h-full bg-cover z-10 opacity-75;
        }
    }
    &--has-background{
        &.is-hovered{
            @apply bg-transparent z-20;
            p, span{
                @apply text-accent-200;
            }
            .marquee-card-bg{
                @apply opacity-100;
            }
            &::after{
                content: '';
                @apply w-full h-full border border-accent-200 absolute left-0 top-0;
            }
        }
    }
    &--has-keyword{
        .marquee-card-keyword{
            font-size: calc(70vw / var(--marquee-card-keyword-chars));
            @apply absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] opacity-0 pointer-events-none text-accent-200 whitespace-nowrap z-50;
        }
        &.is-hovered{
            @apply z-20 bg-white;
            .marquee-card-header{
                span{
                    @apply text-grey-300;
                }
            }
            .marquee-card-main{
                p, span{
                    @apply text-black;
                }
            }
            .marquee-card-keyword{
                @apply opacity-100;
            }
            &::after{
                content: '';
                @apply w-full h-full border border-grey-200 absolute left-0 top-0;
            }
        }
    }
} */

.block-marquee-posts-grid{
    @apply grid grid-cols-4 gap-5;
}