.user-box-section {
  padding: 52px 0;
  background: linear-gradient(145deg, #f7f8fb, #fff 58%, #f2f5fa);
}

.user-box-heading { margin-bottom: 22px; }
.user-box-heading-link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  color: #172033;
  text-decoration: none;
}
.user-box-kicker { margin-bottom: 5px; color: #f28a00; font-size: 14px; font-weight: 700; }
.user-box-heading h2 { margin: 0; font-size: clamp(27px, 3vw, 38px); }
.user-box-open-all {
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: #1667ef;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.user-box-slider { position: relative; overflow: hidden; padding: 4px 52px; }
.user-box-track { display: flex; gap: 18px; transition: transform .42s ease; will-change: transform; }
.user-box-card {
  flex: 0 0 calc((100% - 54px) / 4);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .09);
  color: #1f2937;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.user-box-card:hover { transform: translateY(-4px); box-shadow: 0 17px 34px rgba(15, 23, 42, .14); }
.user-box-photo-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #eef2f7; }
.user-box-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.user-box-login-count {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e53945;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.user-box-body { padding: 13px 14px 16px; text-align: center; }
.user-box-name { margin: 0; color: #0f4cd8; font-size: 15px; font-weight: 700; line-height: 1.35; }
.user-box-position { margin: 4px 0 0; color: #475569; font-size: 12px; line-height: 1.4; }
.user-box-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.user-box-pill { padding: 4px 7px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 700; }
.user-box-pill.primary { background: #e74c3c; }
.user-box-pill.middle { background: #18b78e; }
.user-box-pill.high { background: #f39c12; }
.user-box-loading, .user-box-empty { flex: 0 0 100%; padding: 70px 20px; color: #64748b; text-align: center; }
.user-box-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 7px 20px rgba(15, 23, 42, .17);
  color: #1d4ed8;
  font-size: 28px;
  cursor: pointer;
  transform: translateY(-50%);
}
.user-box-prev { left: 2px; }
.user-box-next { right: 2px; }
.user-box-arrow:disabled { opacity: .35; cursor: default; }

@media (max-width: 1000px) { .user-box-card { flex-basis: calc((100% - 36px) / 3); } }
@media (max-width: 720px) {
  .user-box-section { padding: 38px 0; }
  .user-box-card { flex-basis: calc((100% - 18px) / 2); }
  .user-box-slider { padding: 4px 42px; }
  .user-box-open-all { padding: 9px 13px; font-size: 12px; }
}
@media (max-width: 460px) {
  .user-box-heading-link { align-items: flex-start; flex-direction: column; gap: 12px; }
  .user-box-card { flex-basis: 100%; }
}