/* .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;
    }
    .card-header, .card-main{
        @apply relative z-10;
    }
    .card-header{
        @apply flex justify-between text-grey-300;
    }
    .card-date{
        @apply text-size-sm;
    }
    .card-title{
        @apply text-size-md font-bold;
    }
    .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 object-cover z-10 opacity-75;
        }
    }
    &--has-background{
        &.is-hovered{
            @apply bg-transparent z-20;
            p, span{
                @apply text-yellow-100;
            }
            .card-bg{
                @apply opacity-100;
            }
            &::after{
                content: '';
                @apply w-full h-full border border-yellow-100 absolute left-0 top-0;
            }
        }
    }
    &--has-keyword{
        .card-keyword{
            font-size: calc(70vw / var(--card-keyword-chars));
            @apply absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] opacity-0 pointer-events-none text-yellow-100 whitespace-nowrap z-50;
        }
        &.is-hovered{
            @apply z-20 bg-white;
            .card-header{
                span{
                    @apply text-grey-300;
                }
            }
            .card-main{
                p, span{
                    @apply text-black;
                }
            }
            .card-keyword{
                @apply opacity-100;
            }
            &::after{
                content: '';
                @apply w-full h-full border border-grey-200 absolute left-0 top-0;
            }
        }
    }
} */

.cards-container{
    @apply grid-container mb-base;
    @at-root :where(.grid-container) .cards-container{
        @apply mx-0 px-0;
    }
    &__inner{
        @apply grid gap-[calc(var(--grid-gutter)*2)] grid-cols-1 md:grid-cols-2 xl:grid-cols-4;
        &-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-col items-end aspect-square p-[calc(var(--grid-gutter)*2)];
    p{
        @apply text-black;
    }
    a{
        @apply underline;
    }
    &__excerpt{
        @apply grow;
    }
    .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;
        > p{
            @apply text-size-lg mb-0 w-full;
            + svg{
                @apply shrink-0 ml-3 mb-2;
            }
        }
        &:first-child:last-child{
            @apply items-start;
            > p{
                + svg{
                    @apply mb-0 mt-3;
                }
            }
        }
    }
    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;
            }
        }
    }
    &--columns{
        aspect-ratio: unset;
        > div{
            @apply w-full aspect-square;
            &:first-child{
                @apply flex flex-col xl:w-full xl:h-full;
                header{
                    @apply grow;
                }
                &:last-child{
                    grid-column: span 2;
                }
            }
            &:last-child:not(:first-child){
                @apply hidden lg:flex items-end xl:h-full;
                p{
                    @apply mb-0;
                }
            }
        }
    }
    &--span{
        @screen xl{
            align-self: inherit;
            grid-column: span 2;
            aspect-ratio: 2/1;
        }
        @apply flex-row xl:grid items-start grid-cols-2;
        > div{
            @screen xl{
                aspect-ratio: unset;
            }
            header{
                p:first-child{
                    a{
                        @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--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;
                }
            }    
        }
    }
}