.letters_list {
    columns: 1;
    padding: 0;
    list-style-type: none;
}

.letter_item {
    break-inside: avoid;
    position: relative;
}

.letter_item strong {
    position: absolute;
    top: 4px;
    left: 0;
    font-size: 1.4em;
    line-height: 0.9;
}

.group_letter {
    break-inside: avoid-column;
    margin-bottom: 1em;
    list-style-type: none;
    border-bottom: solid 1px #cccccc;
    padding-bottom: 1em;
}

.letter {}

@media (min-width: 576px) {
    .letters_list {
        columns: 1;
    }
}

@media (min-width: 768px) {
    .letters_list {
        columns: 2;
        column-gap: 100px;
    }
}

@media (min-width: 992px) {
    .letters_list {
        columns: 3;
    }
}

@media (min-width: 1200px) {
    .letters_list {
        columns: 4;
    }
}