.character-showcase{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /* height: 60rem; */
    z-index: 2;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    -webkit-box-shadow:rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    -moz-box-shadow:rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    aspect-ratio: 3 / 2;
    .background{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        img{
            min-height: 100%;
            min-width: 100%;
            object-fit: cover;
            user-select: none;
            pointer-events: none;
        }
    }
    .character-swiper{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 80%;
        
        .swiper-wrapper{
            .swiper-slide{
                display: flex;
                justify-content: center;
                align-items: flex-end;
                overflow: hidden;
                .character-slide{
                    width: 85%;
                    max-width: 80rem;
                    height: 80%;
                    position: relative;
                    bottom: 0;
                    
                    .character-background{
                        display: flex;
                        justify-content: center;
                        position: absolute;
                        overflow: hidden;
                        height: 100%;
                        width: 100%;
                        border-radius: 1rem;
                        img{
                            min-height: 100%;
                            min-width: 100%;
                            object-fit: cover;
                            user-select: none;
                            pointer-events: none;
                        }
                    }
                    .character{
                        position: absolute;
                        display: flex;
                        justify-content: center;
                        max-width: 100%;
                        width: 60%;
                        /* min-width: 30rem; */
                        height: 120%;
                        padding: 1rem;
                        /* transform: translateY(-23%); */
                        left: 0;
                        bottom: 0;
                        img{
                            
                           height: 100%;
                            user-select: none;
                            pointer-events: none;
                        }
                        .desktop{
                            display: block;
                        }
                        .mobile{
                            display: none;
                        }
                    }
                    .information{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        position: absolute;
                        width: 50%;
                        height: 100%;
                        padding: 2rem;
                        z-index: 2;
                        right: 0;
                        top: 0;
                        user-select: none;
                        pointer-events: none;
                        .banner{
                            display: flex;
                            justify-content: flex-start;
                            align-items: flex-end;
                            position: relative;
                            width: 100%;
                            .name{
                                position: absolute;
                                top: -4vw;
                                left: 1vw;
                                font-size: 6vw;
                                font-family: var(--title-font);
                                -webkit-text-stroke: 0.4vw var(--name-border-color);
                                text-stroke: 0.4vw var(--name-border-color); 
                            }
                            .role{
                                position: absolute;
                                bottom: 1.5vw;
                                left: 2vw;
                                font-size: 2.5vw;
                                
                                font-family: var(--title-font);
                            }
                            .role-banner{
                                max-width: 100%;
                            }
                        }
                        .description{
                            position: relative;
                            margin-left: 2rem;
                            margin-top: 3vw;
                            font-size: 1.5vw;
                            font-family: var(--description-font);
                        }
                        .icon{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: absolute;
                            right: 2vw;
                            bottom: 1vw;
                            width: 8vw;
                            aspect-ratio: 4 / 3;
                            img{
                                max-width: 100%;
                                z-index: 2;
                                user-select: none;
                                pointer-events: none;
                            }
                            .background{
                                width: calc(100% + 0.5rem);
                                height: 6vw;
                                z-index: 1;
                                border: 3px solid var(--icon-border-color);
                                background-color: var(--icon-background-color);
                                border-radius: 1vw;
                                bottom: 0.65vw;
                            }
                        }
                    }
                }
            }
        }
        .navigation{
            
            position: absolute;
            bottom: 0;
            width: 95%;
            height: 80%;
            max-width: 95rem;
            .nav-button{
                display: flex;
                align-items: center;
                color: white;
                margin-top: 0;
                top: 0;
                width: 4vw;
                height: 100%;
                img{
                    width: 100%;
                    -webkit-filter: drop-shadow(0px 9px 10px #000000);
                    filter: drop-shadow(0px 9px 10px #000000);
                    user-select: none;
                    pointer-events: none;
                }
            }

            .nav-button::after{
                content:"";
            }
            .swiper-button-prev {
                img{
                    -webkit-transform: scaleX(-1);
                    transform: scaleX(-1);
                }
            }
              
            .swiper-button-next {
                background-image: url("/static/images/Arrow.106c96af04ce.png") !important;
            }
        }
    }
    .thumbnail-swiper{
        aspect-ratio: 3 / 0.5;
        width: 85%;
        max-width: 53rem;
        margin-top: 2vw;
        margin-bottom: 3vw;
        .swiper-wrapper{
            display: flex;
            .swiper-slide-thumb-active{
                .thumbnail-wrapper{
                    outline: 0.5vw solid var(--border-active-color) !important;

                        
                }
                       
            }
            .swiper-slide{
                display: flex;
                align-items: center;
                justify-content: center;
                
                width: calc( (100% )  / 7);
                
                .thumbnail-wrapper{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    width: 80%;
                    overflow: hidden;
                    outline: 0.25vw solid var(--border-color);
                    border-radius: 100%;
                    aspect-ratio: 1 / 1;
                    img{
                        width: calc(110%);
                        height: auto;
                        aspect-ratio: 1 / 1;
                        position: absolute;
                        user-select: none;
                        pointer-events: none;
                    }
                }
                .thumbnail-wrapper:hover{
                    outline: 0.5vw solid var(--border-hover-color);
                    transform: scale(1.10);
                    img{
                        transform: scale(0.91);
                    }
                }
            }
        }
    }
}
/* @media screen and (max-width: 1290px ){
    .character-showcase .information{
        width: 30rem !important;
        .banner{
            .name{
                font-size: 60pt !important;
                left: 1rem !important;
                top: -3rem !important;
            }
            .role{
                font-size: 30pt !important;
                padding: 1.5rem !important;
                padding-left: 2rem !important;
            }
        }
    }
}
@media screen and (max-width: 1080px ){
    .character-showcase .information{
        width: 22rem !important;
        .banner{
            .name{
                font-size: 55pt !important;
                left: 1rem !important;
            }
            .role{
                font-size: 20pt !important;
                padding: 1rem !important;
                padding-left: 1.5rem !important;
            }
        }
    }
} */
@media screen and (min-width: 1500px ){
    .character-showcase{
        aspect-ratio: unset;
        height: 60rem;
        .character-swiper{
            .swiper-wrapper{
                .swiper-slide{
                    .character-slide{
                        
                        
                        .information{
                            .banner{
                                .name{
                                    top: -3rem;
                                    left: 1rem;
                                    font-size: 60pt;
                                    -webkit-text-stroke: 0.3rem var(--name-border-color);
                                    text-stroke: 0.3rem var(--name-border-color); 
                                }
                                .role{
                                    bottom: 1.5rem;
                                    left: 2rem;
                                    font-size: 30pt;
                                    
                                    width: 100%;
                                }
                                
                            }
                            .description{
                                font-size: 15pt;
                                margin-top: 3rem;
                            }
                            .icon{  
                                right: 2rem;
                                bottom: 1rem;
                                width: 8rem;
                                .background{
                                    
                                    height: 6rem;
                                   
                                    border-radius: 1rem;
                                    bottom: 0.74rem;
                                }
                            }
                        }
                    }
                }
            }
            .navigation{
                .nav-button{
                    width: 4rem;
                    height: 100%;
                }                
            }
        
        }
        .thumbnail-swiper{
            margin-top: 2rem;
            margin-bottom: 3rem;
            .swiper-wrapper{
                .swiper-slide-thumb-active{
                    .thumbnail-wrapper{
                        outline: 5px solid var(--border-active-color) !important;    
                    }
                           
                }
                .swiper-slide{
                    
                    .thumbnail-wrapper{
                        outline: 2px solid var(--border-color);

                    }
                    .thumbnail-wrapper:hover{
                        outline: 5px solid var(--border-hover-color);
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 880px ){
    .character-showcase .information .role{
        bottom: 1vw !important;
    }
}
@media screen and (max-width: 770px ){

    .character-showcase{
        justify-content: flex-end;
        
        aspect-ratio: 2 / 3;
        flex-direction: column ;
        
        .character-swiper{
            .swiper-wrapper{
                .swiper-slide{
                    .character-slide{
                        height: 85%;
                        .character{
                            display: flex;
                            justify-content: center;
                            overflow: unset;
                            width: 100%;
                            height: 90%;
                            transform: translateY(-32%);
                            .desktop{
                                display: none;
                            }
                            .mobile{
                                display: block;
                            }
                        }
                        
                        .information{
                            justify-content: flex-start;
                            position: absolute;
                            height: fit-content;
                            width: 100% ;
                            height: 47%;
                            bottom: 0;
                            top: unset;
                            padding: 0 1rem 1rem 1rem;
                            .banner{
                                justify-content: center;
                                align-items: flex-start;
                                .name{
                                    top: -4vw;
                                    left: unset;
                                    font-size: 8vw;
                                }
                                .role{
                                    
                                    left: unset;
                                    font-size: 6vw;
                                    
                                    width: unset;
                                    bottom: 4.5vw !important;
                                }
                                
                            }
                            .description{
                                margin-left: unset;
                                margin: 0 2vw;
                                margin-top: 6vw;
                                font-size: 2.5vw;
                                text-align: center;
                            }
                            .icon{
                                display: none;
                            }
                        }
                    }
                }
            }
        }
        .thumbnail-swiper{
            margin-top: 3vw;
        }
    }
}