.emails-hero { padding-top: 40px; padding-bottom: 20px; }
.emails-hero .emails-hero__veil {
  position:absolute; inset:0; z-index:0;
}
.emails-hero .emails-hero__fx {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(100% 100% at 0% 0%, rgba(0,186,189,.25), transparent 45%),
    radial-gradient(100% 100% at 100% 100%, rgba(164,0,252,.25), transparent 45%);
  pointer-events:none;
}

.emails-hero .email-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid rgba(164,0,252,.08);
}
.emails-hero .email-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 10px rgba(164,0,252,.15);
  border-color: rgba(164,0,252,.22);
}

.emails-hero .email-card__icon {
  width: 56px; height: 56px; min-width:56px;
  display:inline-grid; place-items:center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(164,0,252,.12), rgba(0,186,189,.12));
  font-size: 1.25rem;
  color: #652886;
  box-shadow: inset 0 0 0 1px rgba(164,0,252,.25);
}

.emails-hero .email-card__link {
  word-break: break-word;
}

.emails-hero h2,
.emails-hero p { position: relative; z-index:1; }

.emails-hero .email-card .card-body:focus-within {
  outline: 2px solid #a400fc;
  outline-offset: 2px;
  border-radius: 1rem;
}

@media (max-width: 575.98px) {
  .emails-hero { padding-top: 24px; }
}