.material-icon {
  display: inline-flex;
  width: 70px;
  height: 58px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.material-icon img,
.material-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px #0009);
  pointer-events: none;
}
.gothic-materials > div > .material-icon {
  grid-column: 1 / -1;
  width: 100%;
  height: 74px;
}
.gothic-materials > div {
  background: linear-gradient(145deg, #34302b88, #17232e);
}
.requirement {
  display: inline-flex;
  align-items: center;
}
.requirement .material-icon {
  width: 38px;
  height: 34px;
}
.repair-material-summary .gothic-materials > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
}
.repair-material-summary .gothic-materials > div > .material-icon {
  width: 48px;
  height: 40px;
}

.gothic-materials .inventory-symbol svg {
  width: 100%;
  height: 100%;
  max-width: 64px;
}