.stock-ticker {
    --gap: 20px;
    border-block: 1px solid;
    display: flex;
    font-size: 15px;
    gap: var(--gap);
    overflow: hidden;
    padding-block: 8px;
    user-select: none;
  }
  
  .stock-ticker ul {
    align-items: center;
    animation: scroll 20s linear infinite;
    display: flex;
    flex-shrink: 0;
    gap: var(--gap);
    justify-content: space-between;
    list-style: none;
    min-width: 100%;
  }
  
  .stock-ticker:hover ul {
    animation-play-state: paused;
  }
  
  .stock-ticker ul:first-child {
  }
  
  .stock-ticker ul:last-child {
  }
  
  .stock-ticker .company,
  .stock-ticker .price {
    font-weight: bold;
  }
  
  .stock-ticker .price {
    margin-inline: 4px;
  }
  
  .stock-ticker .plus::before {
    content: "↑";
  }
  
  .stock-ticker .minus::before {
    content: "↓";
  }
  
  .stock-ticker .plus .change,
  .stock-ticker .plus::before {
    color: #089981;
  }
  
  .stock-ticker .minus .change,
  .stock-ticker .minus::before {
    color: #f23645;
  }
  
  @keyframes scroll {
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }