#cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 300px));
}

#animated, #hovered{
  stroke: #0071bc;
  fill: none; 
  stroke-width: 3;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  
}
#animated{
  animation: tracer 1s linear forwards;
}

/* #hovered{
  animation: tracer 1s ease-in reverse;
} */

a:hover #hovered{
  animation: tracer 1s linear forwards;
}

#cards a, #cards article{
  position: relative;
}
#cards article{
  position: absolute;
  top: 0;
}
#cards section{
  padding: 2.4rem 1rem;
}


/* keyframe animations */

@keyframes tracer {
  0% {
    stroke-dashoffset: 1200;
  }
  100% {
    stroke-dashoffset: 0;
  }
}