.alphabet-list {
    display: flex;
    gap: 44px;
    padding-block: 28px;
    margin-block: 32px 48px;
    border-top: 8px solid var(--base-300);
    border-bottom: 8px solid var(--base-300);
}

.alphabet-list a, .alphabet-list span {
    flex-shrink: 0;
    font: var(--a1);
    font-weight: 600;
    color: var(--base-400);
}

.alphabet-list a {
    color: var(--base-0);
    text-decoration: none;
}

.alphabet-list a:hover {
    color: var(--violet-800);
}

.first-latin+.first-latin {
    margin-right: auto;
}


.alphabet-posts-item:not(:last-child) {
    margin-bottom: 64px;
}

.alphabet-posts-item h4 {
    padding: 0;
    scroll-margin-top: calc(104px + 16px);
}

.alphabet-posts-item ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 48px;

    margin-top: 24px;
    padding: 0;
    list-style: none;
}

.alphabet-posts-item ul li {
    margin-bottom: 0;
    font: var(--a2);
}

.alphabet-posts-item ul a {
    color: var(--base-0);
    text-decoration: none;
}

.alphabet-posts-item ul a:hover {
    color: var(--violet-800);
}


@media (max-width: 1440px) {
    .alphabet-list {
        gap: 28px;
        padding-block: 16px;
        margin-block: 20px 32px;
        border-width: 6px;
    }

    .alphabet-posts-item:not(:last-child) {
        margin-bottom: 40px;
    }

    .alphabet-posts-item h4 {
        scroll-margin-top: calc(72px + 16px);
    }

    .alphabet-posts-item ul {
        margin-top: 20px;
        gap: 16px 32px;
    }
}

@media (max-width: 992px) {
    .alphabet-list {
        gap: 32px;
        margin-block: 16px 24px;
        border-width: 4px;
        overflow-x: scroll;
    }

    .first-latin+.first-latin {
        margin-right: 32px;
    }

    .alphabet-posts-item:not(:last-child) {
        margin-bottom: 48px;
    }

    .alphabet-posts-item h4 {
        scroll-margin-top: calc(60px + 16px);
    }

    .alphabet-posts-item ul {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 16px;
    }
}