.earn-notice {
  margin-bottom: 18px;
  padding: 17px 18px;
  border: 1px solid #2f8167;
  border-radius: 15px;
  background: linear-gradient(145deg, #10241e, #0b1916);
  box-shadow: 0 15px 40px #0003;
}

.earn-notice header { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.earn-notice header > span { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #052117; font-weight: 1000; }
.earn-notice header strong,.earn-notice header small { display: block; }
.earn-notice header strong { font-size: 15px; }
.earn-notice header small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.earn-notice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.earn-notice-grid section { padding: 14px 18px 14px 0; }
.earn-notice-grid section + section { padding-left: 18px; border-left: 1px solid var(--line); }
.earn-notice-grid h3 { margin: 0 0 4px; font-size: 13px; }
.earn-notice-grid p { margin: 0; color: #b5c7c1; font-size: 12px; }
.earn-notice > button { margin-top: 14px; padding: 8px 13px; font-size: 12px; color: var(--green); }

@media (max-width: 700px) {
  .earn-notice { padding: 15px; }
  .earn-notice-grid { grid-template-columns: 1fr; }
  .earn-notice-grid section { padding: 13px 0; }
  .earn-notice-grid section + section { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .earn-notice > button { width: 100%; }
}