/*********************************
/* Series Card Start
*********************************/
.grid-5 {
    .series__card {
        &.featured {
            grid-column: 1/3;
        }
    }
}
.series__card {
    position: relative;
    display: block;
    z-index: 1;

    &.featured {
        grid-column: 1/2;
        grid-row: 1/3;
        
    }

    &::after {
        content: "";
        background: rgba(var(--color-black-rgb), 0.4);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 8px;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    .badge {
        position: absolute;
        top: 15px;
        right: 15px;
    }
    
    .card__thumb {
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        
        img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 8px;
            aspect-ratio: 3.75/3;
            transition: var(--transition);
            object-fit: cover;
        }
    }
    .card__content {
        position: absolute;
        left: 50px;
        bottom: 0;
        z-index: 1;
        transition: var(--transition);
        opacity: 0;
        visibility: hidden;

        @include respond (xl) {
            left: 20px;
        }

        .title {
            font-family: var(--font-roboto);
            font-size: 24px;
            font-weight: var(font-semibold);
            line-height: 25px;
            color: var(--color-white);
            display: block;
            transition: var(--transition);
            margin-bottom: 4px;
        }
        .desc {
            font-family: var(--font-roboto);
            font-size: 12px;
            font-weight: var(font-regular);
            line-height: 17px;
            color: var(--color-white);
            margin-bottom: 0;

        }
    }
   
    &:hover {
        &::after {
            opacity: 1;
            visibility: visible;
        }
        .card__content {
            opacity: 1;
            visibility: visible;
            transform: translateY(-30px);
        }
        .card__thumb {
            img {
                transform: scale(1.05);
            }
        }
    }
}

/*********************************
/* Series Card End
*********************************/