.accent-block {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 48px;
    gap: 24px;

    background: var(--base-700);
}

.accent-block--big {
    padding: 120px;
    gap: 40px;
}

.accent-block>* {
    padding: 0;
}

.accent-block .button {
    margin-top: auto;
}

.text-base-100 {
    color: var(--base-100);
}

.users-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 64px 48px;
}

.users-grid .accent-block {
    grid-column: 3 / 5;
}

.user-item {
    display: flex;
    flex-direction: column;
}

.user-item:hover .user-item__avatar {
    box-shadow: inset 0 0 0 20px var(--green-800);
}

.user-item:hover .user-item__name {
    color: var(--green-800);
}

.user-item__avatar {
    margin-bottom: 20px;
    transition: 0.2s ease-in;
}

.user-item__avatar img {
    position: relative;
    z-index: -1;

    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.user-item__name {
    padding-bottom: 4px;
    transition: 0.2s ease-in;
}

.user-item__job {
    margin-bottom: 12px;
    font: var(--t1);
    color: var(--base-100);
}

.user-item__bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.user-item__count-posts {
    display: flex;
    gap: 12px;

    font: var(--a1);
    color: var(--violet-800);
}

.user-item__count-posts::after {
    content: '{}';
    color: var(--base-0);
}


@media (max-width: 1440px) {
    .accent-block {
        padding: 32px;
        gap: 16px;
    }

    .accent-block--big {
        gap: 24px;
        padding: 48px;
    }

    .users-grid {
        gap: 40px 32px;
    }

    .user-item:hover .user-item__avatar {
        box-shadow: inset 0 0 0 12px var(--green-800);
    }

    .user-item__avatar {
        margin-bottom: 16px;
    }

    .user-item__name {
        margin-bottom: 2px;
    }

    .user-item__job {
        margin-bottom: 8px;
    }

    .user-item__bottom, .user-item__count-posts {
        gap: 8px;
    }

    .user-item__bottom svg {
        width: 9px;
    }
}

@media (max-width: 992px) {
    .accent-block, .accent-block--big {
        gap: 16px;
        padding: 24px;
    }

    .users-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .users-grid .accent-block {
        grid-column: unset;
        min-height: 428px;
    }

    .user-item:hover .user-item__avatar {
        box-shadow: inset 0 0 0 6px var(--green-800);
    }

    .user-item__avatar {
        margin-bottom: 12px;
    }

    .user-item__name {
        margin-bottom: 0;
    }

    .user-item__bottom, .user-item__count-posts {
        gap: 6px;
    }

}