Вопрос Css + html фон текста

Как сделать так что-бы поделить фон на 2 символа, что-бы фон с одного не передавался на другой(как будто символы были в квадратиках)

Ну создаёшь div, внутри ещё два div-а и отдельно им пишешь color через css

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.card {
width: 80px;
height: 120px;
border: 1px solid #000;
border-radius: 8px;
margin-right: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 28px;
}

.red {
color: red;
}

.black {
color: black;
}



2
K
10
7

Див внутри еще два дива
В CSS прописать их и выровнять флексом.

Если это картинка то надо ее отдельно обрезать