.card {
    border: 0;
    border-radius: $border-radius-xl;
    background-color: var(--#{$variable-prefix}gray-200);
    position: relative;
}

.card-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 20px;
    grid-auto-rows: minmax(120px, auto);
    grid-auto-flow: dense;


    .card {
        border: 0;
        border-radius: $border-radius-2xl;
        background-color: transparent;
        position: relative;
        overflow: hidden;


        picture {
            position: relative;

            img {
                position: relative;
                z-index: 1;
            }

            &.lazyloaded {
                &:before {
                    display: none;
                }
            }

            &:befoxre {
                position: absolute;
                content: "";
                inset: 0;
                background: linear-gradient(-45deg, var(--#{$variable-prefix}gray-200), var(--#{$variable-prefix}body-bg));
                background-size: 400% 400%;
                animation: animatedBackground 1s linear infinite;
            }
        }

        .card-body {
            position: absolute;
            inset: 0 0 -2rem 0;
            text-align: center;
            padding: 1rem .5rem;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            background: linear-gradient(to bottom, rgba(#131315, 0.1) 0%, rgba(#131315, 0.45) 75%, rgba(#131315, .76) 100%);
            z-index: 10;
            opacity: 0;
            transition: 0.25s;
        }

        h3 {
            font-size: $font-size-sm;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-weight: 500;
            color: #fff;
        }

        &.large {
            grid-column-end: span 2;
            grid-row-end: span 2;

            h3 {
                font-size: $font-size-base;
            }
        }

        &:hover {
            .card-body {
                opacity: 1;
                bottom: 0;
            }
        }
    }

    .card-collection {
        grid-column-end: span 2;
        grid-row-end: span 1;

        .card-collection-body {
            background-color: var(--#{$variable-prefix}gray-200);
            display: flex;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .card-img {
            flex: 0 0 auto;
            width: 50%;
            padding-right: 10px;

            img {
                border-top-right-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
            }
        }

        .card-text {
            padding: 10px 30px 10px 10px;
            flex: 0 0 auto;
            width: 50%;

            h3 {
                text-transform: uppercase;
                font-size: $font-size-sm;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                font-weight: bold;
                color: #fff;
            }
        }
    }
}

.card-tags {

    a {
        background-color: var(--#{$variable-prefix}gray-200);
        padding: .45rem 1rem;
        border-radius: $border-radius;
        font-weight: normal;
        color: var(--#{$variable-prefix}gray-600);
        font-size: $font-size-xs;
        margin: 0 .35rem .535rem 0;
        display: inline-flex;
        transition: all .3s;

        &:hover {
            background-color: var(--theme-color);
            color: #fff;
        }
    }
}

.card-category {
    a {
        color: $text-muted;
        font-size: $font-size-sm;
        position: relative;
        transition: all .3s;

        &:hover {
            text-decoration: underline;
            color: var(--theme-color);
        }

        &:not(:last-child):after {
            content: ",";
            display: inline-block;
            margin-right: 5px;
        }
    }
}


@keyframes animatedBackground {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}