.period-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 15px;
}
.period-summary > div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 15px 18px;
}
.period-summary small,
.period-summary b {
  display: block;
}
.period-summary small {
  font-size: 9px;
  color: #8794a5;
  margin-bottom: 5px;
}
.period-summary b {
  font: 700 18px Inter;
}
.period-table tbody tr {
  cursor: pointer;
}
.period-table tbody tr:hover td {
  background: #edf5ff;
}
.period-table td:last-child {
  color: #1769e0;
  font-size: 9px;
  font-weight: 700;
  text-align: right;
}
@media (max-width: 560px) {
  .period-summary {
    grid-template-columns: 1fr 1fr;
  }
  .period-summary > div:first-child {
    grid-column: 1/-1;
  }
}