/* =========================================================================
   Icons
   ========================================================================= */
.card__arrow,
.btn__icon::after {
  display: inline-block;
  flex: none;
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}

/* Arrow inside a white disc, used on the green CTA buttons. */
.btn__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--syn-green-500);
}
.btn__icon::after { content: ""; width: 14px; height: 14px; }