#characters {
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    color: #000;
    padding: 10em 0;
/* }

#characters::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; */
    background: url('../media/img/characters/chara-bg.webp') center center / cover no-repeat;
    
    /* mask: url('../media/img/characters/chara-bg-mask.webp') center center / 2560px 100% repeat-x; */
}

#characters::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: url('../media/img/characters/chara-select-bg.jpg') center center / cover no-repeat;
    mask: url('../media/img/characters/chara-bg-mask.webp') center center / cover no-repeat;
}

#characters .splash {
    position: absolute;
    /* top: -350px;
    left: 160px;
    z-index: 0;
    mask: url('../media/img/characters/chara-portrait-mask.svg') left bottom / 150% no-repeat; */

    z-index: -1;
    top:-350px;
}

#characters .section-header {
    color: #000;
}

#characters .character-portrait-container {
    display: flex;
    align-items: flex-end;
    position: relative;
}

#characters .character-portrait {
    position: absolute;
    /* left: 0; */
    right: -300px;
}

#characters .character-portrait img {
    max-width: unset;
}

#characters .splash {
    position: relative;
    z-index: -1;
    top:-110px;
    right: -200px
}

#characters .portrait {
    position: absolute;
    bottom:0;
    right: 0;
}

#characters .character-select {
    padding: 1em 3em clamp(1em, 10%, 5em);
    position: relative;
    z-index: 5;
}
/* #characters .character-select::before {
    content: "";
    width: 120%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -20%;
   
    z-index: 0;
} */

#characters .line-break {
    position: absolute;
    width: 130%;
    left: -15%
}

#characters .character-thumb-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 820px;
    max-width: 100%;
    margin: auto;
    position: relative;
    z-index: 1;
}
#characters .character-thumb-list li {
    position: relative;
    margin: 0 5px;
}

#characters .character-thumb {
    display: block;
    flex: 0 0 260px;
    max-width: clamp(80px, 14vw,260px);
}

#characters .character-thumb::before {
    content: "";
    background: url('../media/img/characters/chara-thumb-bg-white.webp') center center / cover no-repeat;
    width:100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-51%, -48%);
    z-index: 0;
}

#characters .character-thumb.active::before,
#characters .character-thumb:hover::before {
    background-image: url('../media/img/characters/chara-thumb-bg-red.webp');
}

#characters .character-thumb img {
    pointer-events: none;
    /* padding:1em; */
    position: relative;
    z-index: 1;
    padding: 25px;
}

#characters .character-information {
    padding-bottom: 18em;
    position: relative;
}

#characters .character-description {
    padding: 1em;
    position: absolute;
    max-width: 100%;
}

@media screen and (min-width: 1025px) {
    #characters .character-select {
        /* clip-path: polygon(20% 0%, 0% 100%, 100% 100%, 100% 0%); */
        /* padding-left: 15%; */
    }
    #characters::after {
        clip-path: polygon(55% 0%, 40% 100%, 100% 100%, 100% 0%);
    }
    #characters .character-portrait::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 2;
        mask: url('../media/img/characters/chara-portrait-mask-reverse.svg') left bottom / 150% no-repeat;
        clip-path: polygon(0 25%, 100% 25%, 100% 100%, 0 100%);
    }
    
    #characters .character-portrait {
        mask: url('../media/img/characters/chara-portrait-mask.svg') left bottom / 150% no-repeat;
        overflow: visible;
    }
}

@media screen and (max-width: 1024px) {
    #characters {
        /* grid-template-columns: 100%;
        grid-template-rows: clamp(30px, 100vw, 1260px) clamp(400px, 85vw, 1080px); */
        /* mask: url(../media/img/characters/chara-bg-mask.webp) top center / 2560px 100%; */
        display:block;
    }

    #characters::after {
        height: 50%;
        bottom: 0;
        top: auto;
    }

    #characters .line-break {
        position: relative;
        width: 100%;
        left: 0%;
        text-align: center;
    }
    #characters .character-portrait-container {
        height: 50%;
    }
    #characters .character-portrait {
        position: relative;
        bottom: 0;
        right: 0;
    }

    #characters img.splash {
        position: absolute;
        z-index: 0;
        left: 50%;
        top: 50%;
        transform: translate(-40%, -55%);
        max-width: 175%;
    }
    #characters .character-portrait .portrait{
        max-width: 100%;
        position: relative;
        z-index: 0;
    }

    #characters .character-select {
        mask: url('../media/img/characters/chara-bg-mask.webp') top center / 2560px 110% repeat-x;
        padding-top: 3em;
    }

    #characters .character-information {
        text-align: center;
        
    }
}

@media screen and (max-width: 640px) {
    #characters::after {
        height: 60%;
        bottom: 0;
        top: auto;
    }
}