.cards-container{
    @apply pl-[calc(var(--grid-gutter)*2)] md:pl-[var(--grid-offset)] pr-[calc(var(--grid-gutter)*2)] mb-base overflow-x-clip;
    /* @at-root :where(.grid-container) .cards-container{
        @apply mx-0 px-0;
    } */
    &__inner{
        @apply grid gap-[calc(var(--grid-gutter)*2)] grid-cols-12;
        /* &-squares{
            @apply max-xl:lg:grid-cols-3;
        } */
    }
    > p{
        @apply font-bold mb-4;
    }
}

.card{
    /* @apply bg-grey-100 xl:grid items-start grid-cols-2 relative; */
    @apply bg-grey-100 relative flex flex-wrap flex-col items-end aspect-square p-[calc(var(--grid-gutter)*2)] col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3;
    p{
        @apply text-black;
    }
    a{
        @apply underline;
        &:hover{
            @apply no-underline;
        }
        &[href^="mailto"]{
            @apply break-all;
        }
    }
    &__excerpt{
        @apply grow;
    }
    &__subtitle{
        @apply mt-4;
    }
    .card__category{
        @apply grow text-grey-300 w-full text-size-md;
    }
    &__img{
        @apply grow mb-[calc(var(--grid-gutter)*2)] -mx-[calc(var(--grid-gutter)*2)] -mt-[calc(var(--grid-gutter)*2)];
        img{
            @apply w-full h-full object-cover;
        }
    }
    &__title{
        @apply w-full flex items-end /*items-start*/;
        > *:not(.card__icon){
            @apply text-size-lg mb-0 w-full;
        }
        > a{
            @apply no-underline;
            &[href^="mailto"]{
                @apply break-words;
            }    
        }
        .card__icon{
            @apply shrink-0 ml-3 relative;
            &::before{
                content: '';
                background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23000'/%3E%3C/svg%3E");
                background-size: 27px 20px;
                @apply inline-block w-[27px] h-5 bg-no-repeat bg-contain;
            }
        }
    }
    &__date{
        @apply text-md text-grey-300 mb-xxs;
    }
    header{
        @apply mb-base xl:mb-0;
        p{
            @apply text-size-md-lg mb-0;
            &:first-child{
                @apply flex justify-between items-start;
                a{
                    @apply top-2 relative;
                }
            }
            &:last-child:not(:first-child){
                @apply text-size-base;
            }
        }
    }
    &:hover{
        @apply bg-black text-white;
        p, span{
            @apply text-white;
        }
        &:not(.card--y) .card__icon{
            &::before{
                background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFF'/%3E%3C/svg%3E");
            }
        }
    }
    &--columns{
        /* aspect-ratio: unset; */
        .card__title{
            @apply items-start;
        }
        > div{
            @apply w-full xl:aspect-square;
            &:first-child{
                @apply flex flex-col xl:w-full xl:h-full;
                header{
                    @apply grow;
                }
                &:last-child{
                    grid-column: span 2;
                    @apply h-full;
                }
            }
            &.card__content{
                @apply /*hidden lg:flex*/ flex flex-grow xl:flex-grow-0 items-end xl:h-full mt-base xl:mt-0;
                p{
                    @screen md{
                        display: -webkit-box;
                        -webkit-line-clamp: 7;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }
                    @apply mb-0;
                }
            }
        }
    }
    &--column-span{
        aspect-ratio: unset;
        @screen xl{
            align-self: inherit;
            /* aspect-ratio: 2/1; */
            aspect-ratio: 2/0.98;
        }
        @apply xl:flex-row xl:grid items-start grid-cols-2 col-span-12 lg:col-span-6;
        > div{
            @screen xl{
                aspect-ratio: unset;
            }
            .card__icon{
                @apply xl:absolute xl:right-[calc(var(--grid-gutter)*2)] xl:top-7;
            }
            footer{
                /* @apply mb-base xl:mb-0; */
                p{
                    @apply mb-0;
                }
            }    
        }
    }
    &--alt{
        @apply bg-black text-white;
        p{
            @apply text-white;
        }    
    }
    &--alt-invert{
        @apply bg-white text-black;
        > p{
            @apply text-black;
        }
        &:hover{
            @apply bg-black text-white;
            > p{
                @apply text-white;
            }
        }
    }
    &--y{
        .card__icon{
            &::before{
                background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFCC00'/%3E%3C/svg%3E");
            }
        }
        &.card--alt{
            @apply text-yellow-100;
            p{
                @apply text-yellow-100;
            }    
        }
        &.card--alt-invert{
            @apply bg-yellow-200;
            &:hover{
                @apply text-yellow-100;
                > p{
                    @apply text-yellow-200;
                }
            }    
        }
    }
    &--no-arrow{
        @apply items-start;
    }
    &--bottom-title{
        @apply flex-nowrap;
        .card__title{
            @apply items-end;
            p{
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
        .card__icon{
            @apply top-[unset] bottom-2.5;
        }
    }
}

.card-grid-item{
    @apply items-start;
    &__header{
        @apply grow;
    }
    &__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 object-cover z-10 opacity-75;
        }
    }
    .card__title{
        p{
            @apply text-md font-bold;
        }
    }
    .card__category, .card__date{
        @apply text-sm;
    }
    &:hover{
        @apply bg-[#0066FF];
    }
    &--has-background{
        &.is-hovered{
            @apply bg-transparent z-20;
            p, span{
            }
            .card-grid-item__bg{
                @apply opacity-100;
            }
            &::after{
                content: '';
                @apply w-full h-full border border-white absolute left-0 top-0;
            }
        }
    }
    &--eventi{
        @apply bg-black text-white;
        p{
            @apply text-white !important;  
        }
    }
}