.hwt-metal-cards{
  --gap: 1.75em;
  --ratio: 1.33;

  display: grid;
  width: 100%;
  gap: var(--gap);

  
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));

  
  justify-items: stretch;
  align-items: stretch;
}

.hwt-mc{
  position:relative;
  aspect-ratio:var(--ratio);
  border-radius:1.125em;
  overflow:hidden;              
  isolation:isolate;
  background: radial-gradient(120% 100% at 20% 0%, rgba(90, 15, 160, 0.5) 20%, rgba(20,5,40,.5) 100%);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .3);
}

.hwt-mc__abbr{
  position:absolute; z-index:0;
  bottom: 0;
  right: 0;
  pointer-events:none; user-select:none;
  font-weight:normal; letter-spacing:.02em;
  color:rgba(31, 16, 46, 1); filter:blur(.3px);
  font-size: 10em;
  line-height: 0.8em;
  font-weight: bold;
  opacity: 0.1;
  text-shadow:
    1px 1px 2px #C7BDD1; 
}

.hwt-mc__inner{
  position:relative; z-index:3;   
  height:100%;
  padding:1em 1.125em 0.875em;
  color:#EDE7FF;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:0.5em;
  overflow:visible;               
}

.hwt-mc__head{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:normal; letter-spacing:.05em;
  font-variant-numeric: tabular-nums;
  font-size: 0.875em;
  color: #9F83F2;
}

.hwt-mc__title{
  margin:0.125em 0 0;
  font-size:1.25em !important;
  letter-spacing:.22em;
  font-weight:bold !important;
  margin-top: 1em;
}

.hwt-mc__info{
  list-style:none; margin:0; padding:0;
  align-self:end;
  font-size: 1em;
  font-weight: bold;
  color:rgba(255,255,255,.28);
      letter-spacing: 0.2em;
    line-height: 1.5em;
}
.hwt-mc__info li + li{ margin-top:0.25em; }

.hwt-mc__spark {
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 3;
}
.hwt-mc__spark path{
  fill:none;
  stroke:#9F83F2;
  stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect: non-scaling-stroke;
  opacity:.98;
}

.hwt-mc *{ text-wrap:balance; }