img.image {
  border: 1px solid #9e9e9e;
  border-radius: 4px;
  box-shadow: var(--md-shadow-z1);
}

img.border {
  border: 1px solid #9e9e9e;
  box-shadow: var(--md-shadow-z1);
}

img.round {
  border-radius: 4px;
}

.subtabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1rem 1rem 0 1rem;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
  max-width: 61rem;
}

.subtabs__item { 
  flex-shrink: 0;
  border: .05rem solid var(--md-default-fg-color--lightest);
  border-radius: .1rem;
  display: block;
  margin: .2rem .2rem;
  padding: .1rem .1rem;
  transition: border .25s, box-shadow .25s;
  font-size: .7rem;
}

.subtabs__item:hover {
  box-shadow: var(--md-shadow-z2) !important;
}

.subtabs__item.is-active {
  background: rgba(0,0,0, .05);
  border-color: transparent;
}

.subtabs__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  text-decoration: none;
  white-space: nowrap;
}

.subtabs__link svg {
  display: flex;
  width: 20px;
  height: 20px;
  fill: #333;
}

.subtabs__item--search {
  border-color: transparent;
}

@media (max-width: 43.3rem) {
  .subtabs {
    display: none !important;
  }
}

.grid:has(> *:only-child) {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 43.3rem) {
  .grid:has(> *:only-child) {
    grid-template-columns: unset;
  }
}

.green {
  color: green;
}

.red {
  color: #cc0000;
}