.wcc-wrap{
  margin:0;
  padding:0;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
  background:var(--wcc-wrap,transparent);
}
.wcc-grid-front {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 100%;
    margin: 15px;
}
.wcc-card{
  display:flex;
  align-items:stretch;
  width:min(100%,var(--wcc-card-w,380px));
  max-width: 100%;
  background: var(--wcc-bg,#FFF3EC);
  border:1px solid var(--wcc-border,#F5C4B0);
  border-left:0;
  border-radius: 6px;
  overflow:hidden;
  box-sizing:border-box;
  min-height: 105px;
}
.wcc-card.is-expired{opacity:.55}
.wcc-perf{
  --border-color: var(--wcc-border,#F5C4B0);
  position:relative;
  width:8px;
  min-width:8px;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
  align-self:stretch;
  background:var(--wcc-bg,#FFF3EC);
}
.wcc-perf-bar{
  width: 8px;
  height:100%;
  position:relative;
}
.wcc-scallop{
  background: radial-gradient(circle at 0 .375rem, #ffffff 0, #ffffff .1875rem, var(--border-color) .1875rem, var(--border-color) .25rem, #ffffff00 .25rem);
  background-repeat:repeat-y;
  background-size:.25rem .625rem;
  width:.25rem;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
.wcc-dash{
  background:repeating-linear-gradient(var(--border-color), var(--border-color) .1875rem, transparent .1875rem, transparent .625rem);
  background-size:1px .625rem;
  width:1px;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
.wcc-main{
  flex:1;
  min-width:0;
  padding:14px 14px 12px 12px;
}
.wcc-title{
  font-size:20px;
  font-weight:800;
  color:var(--wcc-code,#1A1A1A);
  line-height:1.2;
  margin-bottom:4px;
}
.wcc-min{
  font-size:14px;
  font-weight:700;
  color:var(--wcc-desc,#E8590C);
  margin-bottom:6px;
}
.wcc-badge{
  display:inline-block;
  background:#fff;
  color:var(--wcc-accent,#E8590C);
  border:1px solid var(--wcc-border,#F5C4B0);
  border-radius:4px;
  font-size:12px;
  font-weight:600;
  padding:3px 8px;
  margin-bottom:10px;
}
.wcc-exp{
  margin:8px 0 0;
  color:var(--wcc-text,#9a9a9a);
  font-size:12px;
}
.wcc-side{
  width:86px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  background:var(--wcc-bg,#FFF3EC);
  border-left:1.5px dashed var(--wcc-border,#F5C4B0);
}
.wcc-copy{
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 68px;
  height: 30px;
  padding: 6px 14px;
  margin: 0 auto;
  border: 0;
  border-radius: 6px;
  background: var(--wcc-accent, #E8590C);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  box-sizing: border-box;
}
.wcc-copy.is-ok{opacity:.85}
@media(max-width:600px){
  .wcc-card{width:100%}
}