.matrix-top {
  max-width: calc(1440px - 8vw);
  margin: 0 auto 14px;
}

.chart-only {
  grid-template-columns: 1fr;
}

.product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brandmark {
  background: var(--red);
}

.positive {
  color: #e14a2e;
}

.negative {
  color: #009574;
}

.product {
  padding: 14px 16px;
}

.product > b {
  margin-top: 10px;
  font-size: 24px;
}

.product > small {
  font-size: 9px;
}

.quote {
  margin-top: 10px;
  padding-top: 9px;
}

@media (max-width: 560px) {
  .matrix-top {
    margin-left: 3vw;
    margin-right: 3vw;
  }

  .product-grid {
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    overflow-x: auto;
  }

  .product {
    min-width: 145px;
  }
}