.focus-areas {
    position: relative;
    z-index: 1;
}

.focust-areas__image_1 {
    width: 20%;
    left: 0%;
    top: 25%;
}

.focust-areas__image_2 {
    width: 25%;
    right: 0%;
    top: 50%;
}

.focust-areas__image_3 {
    width: 25%;
    left: 0%;
    bottom: 0%;
}

.focus-areas__bg {
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

.focus-areas__info {
    max-width: 56.5rem;
    margin-bottom: 5rem;
    gap: 4rem;
}

.focus-areas__content {
    gap: 2rem;
    padding-top: 10rem;
}

.focus-areas__alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    width: 100%;
    padding: 2rem;
    position: sticky;
    top: 12rem;
    z-index: 2;
}

.focus-areas__letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.2rem;
    font-weight: 600;
    transition: all 0.3s;
}

.focus-areas__letter.disabled {
    color: var(--color-gray-light);
    pointer-events: none;
}

.focus-areas__letter.current {
    background: linear-gradient(90deg, #3A5EFD 0%, #671CF5 35%, #FE6C39 70%, #FFC933 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.focus-areas__list {
    gap: 2rem;
}

.focus-areas-item {
    scroll-margin-top: 12rem;
    gap: 2rem;
    width: 100%;
    padding: 4rem;
}

.focus-areas-item__sep {
    width: 100%;
    height: 0.1rem;
    background: linear-gradient(90deg, 
        #5B9EFF 0%,
        #8B5EFF 33%,
        #FF6B4A 66%,
        #FFD700 100%
    );
    margin-bottom: 2rem;
}

.focus-areas-item__list {
    width: 100%;
    columns: 3;
    column-gap: 1rem;
}

.focust-areas__image {
    position: absolute;
    z-index: -1;
}

@media screen and (max-width: 767.9px) {
    .focus-areas__alphabet {
        position: static;
    }

    .focus-areas-item__list {
        columns: 2;
        column-gap: 4rem;
    }
}

@media screen and (max-width: 575.9px) {
    .focus-areas__content {
        gap: 4rem;
    }

    .focus-areas__letter.current {
        background: var(--color-default);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .focus-areas-item__list {
        columns: unset;
    }

    .focus-areas-item {
        padding: 2.4rem;
    }
}