.experience-row,
.experience-row.current-role {
  position: relative;
  background: #101218;
  border-color: var(--line);
  transition: border-color .4s ease;
}

.experience-row::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg, #16223a, #141b2a 42%, #11151d
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.experience-row > * {
  position: relative;
  z-index: 1;
}

.experience-row::before {
  z-index: 2;
  background: #42547c;
  transition: background-color .4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .experience-row:hover {
    border-color: #3c5078;
  }

  .experience-row:hover::after {
    opacity: 1;
  }

  .experience-row:hover::before {
    background: var(--accent);
  }
}