/* Fixed tile and overlay keep the SVG-to-still swap out of layout. */
.contact-mail-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: var(--gold-ink);
  background: linear-gradient(145deg, #d5b3541f, #d5b35408);
  box-shadow: inset 0 0 0 1px #a8873545, inset 0 1px 0 #fff9, 0 2px 4px #6b501218;
  pointer-events: none;
}
.contact-email .contact-mail-icon > svg { width: 28px; height: 28px; }
.contact-mail-render {
  position: absolute;
  width: 36px;
  height: 36px;
  filter: drop-shadow(1px 2px 1px #59421565);
}
.contact-mail-icon.is-raised > svg { visibility: hidden; }
@media (max-width: 599px) {
  .contact-mail-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; }
  .contact-mail-render { width: 30px; height: 30px; }
  .contact-email .contact-mail-icon > svg { width: 24px; height: 24px; }
}
@media print {
  .contact-mail-render { display: none; }
  .contact-mail-icon.is-raised > svg { visibility: visible; }
}