/* .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;
    &__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-black text-yellow-100 xl:grid items-start grid-cols-2 relative;
    p{
        @apply text-yellow-100;
    }
    a{
        @apply underline;
    }
    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;
            }
        }
    }
    > div{
        @apply xl:aspect-square  p-[calc(var(--grid-gutter)*2)];
        &:first-child{
            @apply flex flex-col xl:h-full;
            header{
                @apply grow;
            }
            &:last-child{
                grid-column: span 2;
            }
        }
        &:last-child:not(:first-child){
            @apply flex items-end;
            p{
                @apply mb-0;
            }
        }
    }
    &:not(.card--span){
        @apply aspect-square;
        > div{
        }
    }
    &--span{
        @apply aspect-[2/1];
        @apply self-start;
        @screen xl{
            align-self: inherit;
        }
        @screen xl{
            grid-column: span 2;
        }
        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-yellow-200 text-black;
        > p{
            @apply text-black;
        }
        &:hover{
            @apply bg-black text-yellow-100;
            > p{
                @apply text-yellow-200;
            }
        }
    }
    &--mono{
        @apply flex items-end aspect-square p-[calc(var(--grid-gutter)*2)];
        > p{
            @apply text-size-lg mb-0;
            + svg{
                @apply shrink-0 ml-3;
            }
        }
    }
}