.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-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-start;
        > *:not(.card__icon){
            @apply text-size-lg mb-0 w-full;
        }
        > a{
            @apply no-underline;
        }
        .card__icon{
            @apply shrink-0 ml-3 relative top-2.5;
            svg{
            }
        }
        /* &: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;
            }
        }
    }
    &:hover{
        @apply bg-black text-white;
        p{
            @apply text-white;
        }
    }
    &--columns{
        /* aspect-ratio: unset; */
        > 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--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;
                }
            }    
        }
    }
    &--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;
        }
    }
}