.match-mode-explainer{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 16px;
}
.match-mode-explainer article{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:start;
  gap:10px;
  min-height:102px;
  padding:13px;
  border:1px solid #d8e2e8;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  color:#273244;
  box-shadow:0 7px 18px rgba(34,52,69,.055);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.match-mode-explainer article>span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#e7f5f3;
  color:#087f7a;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.04em;
}
.match-mode-explainer article>div{min-width:0}
.match-mode-explainer strong{
  display:block;
  margin:1px 0 5px;
  color:#263245;
  font-size:.72rem;
  font-weight:900;
}
.match-mode-explainer p{
  margin:0;
  color:#68778a;
  font-size:.68rem;
  font-weight:700;
  line-height:1.5;
}
.match-mode-explainer article.is-active{
  border-color:rgba(117,73,228,.42);
  background:linear-gradient(135deg,rgba(117,73,228,.075),rgba(19,174,170,.07));
  box-shadow:0 9px 23px rgba(70,68,168,.09);
}
.match-mode-explainer article.is-active>span{
  background:linear-gradient(135deg,#7549e4,#13aeaa);
  color:#fff;
}
.match-mode-explainer+.active-search-summary{margin-top:0}
@media(max-width:1280px){
  .match-mode-explainer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .match-mode-explainer article{min-height:90px}
}
@media(max-width:620px){
  .match-mode-explainer{grid-template-columns:1fr;gap:8px}
  .match-mode-explainer article{min-height:0;padding:12px}
}
@media(prefers-reduced-motion:reduce){
  .match-mode-explainer article{transition:none}
}