.qg-wrap{max-width:980px;margin:0 auto;padding:44px 20px 64px;font-family:inherit;color:#2f2830}
.qg-head{text-align:center;margin:0 auto 28px;max-width:680px}
.qg-head h1{margin:0 0 8px;color:#473949;font-size:32px;line-height:1.3}
.qg-head p{margin:0;color:#746b72;font-size:14px;line-height:1.8}
.qg-grid{display:grid;gap:8px}
.qg-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto 28px;
  align-items:center;
  gap:12px;
  min-height:72px;
  padding:11px 14px;
  border:1px solid rgba(71,57,73,.11);
  border-radius:13px;
  background:rgba(255,255,255,.34);
  color:inherit!important;
  text-decoration:none!important;
  transition:.16s ease;
}
.qg-row.is-live:hover{
  border-color:rgba(71,57,73,.28);
  background:rgba(255,255,255,.55);
  transform:translateX(-2px);
}
.qg-index{
  font-size:13px;
  font-weight:800;
  color:#9a9096;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.qg-main{min-width:0}
.qg-main h2{
  margin:0 0 3px;
  color:#473949;
  font-size:16px;
  line-height:1.45;
}
.qg-main p{
  margin:0;
  color:#756b72;
  font-size:11.5px;
  line-height:1.55;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qg-status{
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
  color:#473949;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(71,57,73,.07);
}
.qg-row.is-soon{opacity:.62}
.qg-row.is-soon .qg-status{color:#877e84;background:rgba(71,57,73,.04)}
.qg-arrow{font-size:18px;color:#473949;font-weight:700;text-align:center}

@media(max-width:600px){
  .qg-wrap{padding:34px 14px 52px}
  .qg-head{margin-bottom:22px}
  .qg-head h1{font-size:27px}
  .qg-row{
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:9px;
    min-height:64px;
    padding:10px 11px;
  }
  .qg-index{font-size:11px}
  .qg-main h2{font-size:14px}
  .qg-main p{font-size:10.5px}
  .qg-status{font-size:9.5px;padding:4px 7px}
  .qg-arrow{display:none}
}