.character-title {
    color: var(--red);
    text-align: center;
    padding: 88px 0 36px 0;
}

.character .carousel-cell {
    width: 300px;
    height: 300px;
    counter-increment: carousel-cell;
    display: flex;
    justify-content: center;
    margin: 8px;
}

.character button.flickity-button {
    opacity: 0;
    right:0;
    height: 100%;
    width: 10vw;
}

.character .flickity-button.flickity-prev-next-button.next {
    right: 0;
    opacity: 0;
}

.character .flickity-button.flickity-prev-next-button.previous {
    left: 0;
    opacity: 0;
}

.character .flickity-page-dots {
    display: none;
}

.character-text {
    margin: 24px auto;
    padding: 0 24px;
    max-width: 758px;
    text-align: center;
    height: 150px;
}

@media screen and (min-width: 900px) {
    .character button.flickity-button {
        opacity: 1;
        transform: translate(0, -240px);
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background-color: var(--red);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .character button.flickity-button .flickity-button-icon {
        filter: invert(20%) brightness(200%) contrast(600%);
        width: 10px;
        position: initial;
    }

    .character .flickity-button.flickity-prev-next-button.next {
        opacity: 1;
        right: 25%;
    }

    .character .flickity-button.flickity-prev-next-button.previous {
        opacity: 1;
        left: 25%;
    }
}