.character-card-item {
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: 0.2s ease-in-out;

}

.character-card-item > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.character-card-item:has(a:hover) {
    transform: translateY(-5px);
}

.character-card-item:has(a:hover) .character-title {
    color: #1976d2;
}

.character-card-item picture {
    height: 100%;
    border-radius: 2.5%;
    overflow: hidden;
}

.character-card-item img {
    aspect-ratio: 3/4;
    height: 100%;
}

.character-card-item .character-title {
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    word-break: break-word;
    transition: 0.2s ease-in-out;
}