.infolio-creative-blog-list {
    .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(var(--bs-gutter-y) * -1);
        margin-right: calc(var(--bs-gutter-x) * -.5) !important;
        margin-left: calc(var(--bs-gutter-x) * -.5) !important;
    }

    .item {

        &.change-background {
            background: #eee;
        }

        padding: 40px;
        position: relative;

        a,
        a:hover {
            color: inherit;
        }

        a,
        span {
            display: inline-block;
        }

        .ml-auto {
            margin-left: auto;
        }

        &:hover {
            .background {
                opacity: 1;
                background-position: center bottom;
            }
        }

        .cont {
            .title {
                color: #1a1a1a;
            }

            .categories {
                a {
                    font-size: 12px;
                    font-weight: 300;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    padding: 8px 12px;
                    border: 1px solid rgba(255, 255, 255, .1);
                    border-radius: 30px;
                    margin: 5px 5px 5px 0;
                    color: #1a1a1a;
                }
            }
        }

        .info {
            .author {
                margin-right: 20px;

                .author-image {
                    width: 60px;
                    height: 60px;
                    overflow: hidden;
                    border-radius: 50%;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }

                .author-info {
                    .author-text {
                        color: #1a1a1a;
                    }

                    .author-name {
                        color: #1a1a1a;
                    }
                }
            }
        }

        .date {
            color: #1a1a1a;
        }

        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center top;
            opacity: 0;
            transition: opacity .4s, background-position 10s linear;

            .more {
                z-index: 7;
                width: 100%;

                a {
                    font-size: 14px;
                    padding: 14px 35px;
                    border-radius: 30px;

                    span,
                    i {
                        color: #000;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 992px) {
    .infolio-creative-blog-list .justify-end {
        justify-content: flex-start !important;
    }

    .infolio-creative-blog-list .item .ml-auto {
        margin-left: 0;
        margin-top: 30px;
    }
}

body.tcg-dark-mode {
    .infolio-creative-blog-list {
        .item {
            background: #1d1d1d;

            &.change-background {
                background: #1a1a1a;
            }

            .cont {
                .title {
                    color: #FFFFFF;
                }

                .categories {
                    a {
                        color: #ffffff;
                    }
                }
            }

            .info {
                .author {
                    .author-info {
                        .author-text {
                            color: #ffff;
                        }

                        .author-name {
                            color: #ffff;
                        }
                    }
                }
            }

            .date {
                color: #ffff;
            }
        }
    }
}

@media (prefers-color-scheme: dark) {
    body.tcg-auto-mode {
        .infolio-creative-blog-list {
            .item {
                background: #1a1a1a;

                &.change-background {
                    background: #1d1d1d;
                }

                .cont {
                    .title {
                        color: #FFFFFF;
                    }

                    .categories {
                        a {
                            color: #ffffff;
                        }
                    }
                }

                .info {
                    .author {
                        .author-info {
                            .author-text {
                                color: #ffff;
                            }

                            .author-name {
                                color: #ffff;
                            }
                        }
                    }
                }

                .date {
                    color: #ffff;
                }
            }
        }
    }
}