.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  font-family: var(--font-medium);
  letter-spacing: 0.048em;
  color: var(--color-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.2rem;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.arrow-link::after {
  content: "";
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.75 -0.75 11.5 11.5' fill='none' stroke='%23031a4a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 5h10'/%3E%3Cpath d='M5 0l5 5-5 5'/%3E%3C/svg%3E")
    no-repeat center / contain;
  transition:
    transform 0.2s,
    background 0.2s;
}

.arrow-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.arrow-link:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.75 -0.75 11.5 11.5' fill='none' stroke='%230d48de' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 5h10'/%3E%3Cpath d='M5 0l5 5-5 5'/%3E%3C/svg%3E");
  transform: translateX(0.4rem);
}