#alphabet_search_form {
    max-width: 500px;
    display: flex;
    margin: 0 auto;
    gap: 10px;
}

.letters {
    display: flex;
    column-gap: 1rem;
}

.alphabet_link {
    font-size: 21px;
    line-height: 30px;
    color: var(--color-alt-content-link);
}

.alphabet_link:hover {
    color: var(--color-alt-content-link-hover) !important;
}
.alphabet_link.active {
    color: var(--color-alt-content-link-hover);
}

.inactive {
    color: #ccc;
    pointer-events: none;
    cursor: default;
}

.abc_terms {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

.abc_terms_block {
    display: flex;
}

.abc_terms_block > div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.abc_terms_block > h4 {
    width: 60px;
    font-size: 40px;
    font-weight: 700;
    line-height: 30px;
}


.abc_term {
    display: inline-flex;
}


.abc_term_link {
    flex: 0 1 auto;
    font-size: 21px;
    line-height: 40px;
    color: var(--color-content-text);
}

.abc_term_link:hover {
    color: var(--color-alt-content-link) !important;
}
.abc_term_link.active {
    color: var(--color-alt-content-link);
    font-weight: 700;
}

.abc_term_description_wrapper {
    position: relative;
    flex-grow: 1;
}

.abc_term_description {
    display: none;
    position: absolute;
    right: 0;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);

    border-radius: 10px;
    font-size: 23px;
    line-height: 30px;
    box-shadow: 0 15px 35px 0 rgba(191, 191, 191, 0.30);
    z-index: 1;
}

.abc_term_description::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--color-alt-content-link) 20%, transparent 40%);
    padding: 1px;
    margin: -1px;
    box-sizing: border-box; /* Учитываем padding в размерах */
    border-radius: 10px;
    z-index: -1;
}

.abc_term_description_inner {
    background: var(--color-content-bg); /* Сделаем фон прозрачным */
    padding: 10px 68px;
    border-radius: 10px;
}

.abc_term_description .title {
    color: var(--color-alt-content-link);
}

@media(max-width: 1024px) {
    .letters {
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    .abc_term {
        flex-direction: column;
    }
    .abc_term_description {
        position: initial;
        transform: unset;
    }
}