/*.box {
    --border-width: 3px;
  
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;
    font-family: Lato, sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    color: white;
    background: #222;
    border-radius: var(--border-width);
  
    &::after {
      position: absolute;
      content: "";
      top: calc(-1 * var(--border-width));
      left: calc(-1 * var(--border-width));
      z-index: -1;
      width: calc(100% + var(--border-width) * 2);
      height: calc(100% + var(--border-width) * 2);
      background: linear-gradient(
        60deg,
        hsl(0, 0%, 0%),
        hsl(0, 2%, 38%),
        hsl(0, 28%, 60%),
        hsl(0, 6%, 85%),
        hsl(0, 91%, 40%),
        hsl(0, 0%, 79%),
        hsl(0, 10%, 80%),
        hsl(0, 0%, 0%)
      );
      background-size: 300% 300%;
      background-position: 0 50%;
      border-radius: calc(2 * var(--border-width));
      animation: moveGradient 4s alternate infinite;
    }
  }
  
  @keyframes moveGradient {
    50% {
      background-position: 100% 50%;
    }
  }
  */