@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}
@keyframes spin {
  to {
    --bg-angle: 360deg;
  }
}
.scale-up {
  text-align: center;
}
.scale-up-grey {
  text-align: center;
}
.scale-up .animated-border {
  transition: ease-in-out 0.2s;
  animation: spin 3s infinite linear paused;
  background: linear-gradient(
        to bottom,
        oklch(0.1 0.2 240 / 0.95),
        oklch(0.1 0.2 240 / 0.95)
      )
      padding-box,
    conic-gradient(
        from var(--bg-angle) in oklch longer hue,
        oklch(0.85 0.37 0) 0 0
      )
      border-box;
  border: 2px solid transparent;
  border-radius: 6px;
}
.scale-up-grey .animated-border {
  transition: ease-in-out 0.2s;
  animation: spin 3s infinite linear paused;
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,0.8281687675070029) 35%, rgba(108,108,108,1) 100%);
  border: 2px solid transparent;
  border-radius: 6px;
}
.scale-up .animated-border:hover {
  transform: scale(1.05);
  animation-play-state: running;
}
.scale-up-grey .animated-border:hover {
  transform: scale(1.05);
  animation-play-state: running;
}
.breaker {
  font-size: 0;
  height: 20px;
  line-height: 0;
}

<div class="scale-up-grey">
  <a href="#" target="_blank">
    <img src="https://placehold.co/1200x100/blue/white" class="animated-border mono" alt="Brother mono printers" style="width: 80%;">
  </a>
</div>

<div class="breaker">
</div>

<div class="scale-up">
  <a href="#" target="_blank"><img src="https://placehold.co/1200x100/blue/white" class="animated-border" alt="Brother Colour printers" style="width: 80%;">
  </a>
</div>