.account-reward-activity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.account-activity-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 168px;
  align-content: end;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(141, 204, 44, .24);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(141, 204, 44, .08), rgba(0, 0, 0, .22));
  color: #fff !important;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.account-activity-card:hover,
.account-activity-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(141, 204, 44, .7);
  background: linear-gradient(145deg, rgba(141, 204, 44, .15), rgba(0, 0, 0, .25));
}

.account-activity-card:focus-visible { outline: 3px solid #8dcc2c; outline-offset: 3px; }
.account-activity-card__count { color: #8dcc2c; font-size: clamp(34px, 4vw, 52px); font-weight: 950; line-height: .9; letter-spacing: -.05em; }
.account-activity-card strong { margin-top: 12px; font-size: 13px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.account-activity-card small { margin-top: 4px; color: #929aa4; font-size: 11px; }
.account-activity-card > i { position: absolute; right: 18px; bottom: 18px; color: #8dcc2c; font-size: 18px; font-style: normal; transition: transform .2s ease; }
.account-activity-card:hover > i { transform: translateX(4px); }

.account-activity-card__icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(141, 204, 44, .3);
  border-radius: 50%;
  background: rgba(141, 204, 44, .08);
}

.account-activity-card__icon::before,
.account-activity-card__icon::after { content: ""; position: absolute; }
.account-activity-error { grid-column: 1 / -1; margin: 0; color: #aeb5bf; }
.account-activity-card--calendar .account-activity-card__icon::before { inset: 9px 8px 7px; border: 2px solid #8dcc2c; border-radius: 3px; }
.account-activity-card--calendar .account-activity-card__icon::after { left: 8px; right: 8px; top: 13px; border-top: 2px solid #8dcc2c; }
.account-activity-card--streak .account-activity-card__icon::before { left: 10px; top: 7px; width: 13px; height: 18px; border-radius: 60% 40% 55% 45%; background: #8dcc2c; transform: rotate(12deg); }
.account-activity-card--picks .account-activity-card__icon::before { left: 9px; top: 9px; width: 16px; height: 16px; border: 2px solid #8dcc2c; border-radius: 50%; }
.account-activity-card--picks .account-activity-card__icon::after { left: 15px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: #8dcc2c; }
.account-activity-card--brief .account-activity-card__icon::before { inset: 8px 9px; border: 2px solid #8dcc2c; border-radius: 2px; }
.account-activity-card--brief .account-activity-card__icon::after { left: 13px; right: 13px; top: 14px; height: 2px; background: #8dcc2c; box-shadow: 0 5px #8dcc2c; }

@media (max-width: 900px) { .account-reward-activity { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .account-reward-activity { grid-template-columns: 1fr; }
  .account-activity-card { min-height: 138px; }
}
@media (prefers-reduced-motion: reduce) { .account-activity-card, .account-activity-card > i { transition: none; } }