body {
  --item-height: 126px;
  --item-width: 90px;

  background-color: hsl(315, 7%, 11%);
  margin: 0;
  font-family: sans-serif;
}

#tierlist {
  display: grid;
  grid-template-columns: clamp(15rem, 20vw, 25rem) auto;
  grid-auto-rows: minmax(calc(var(--item-height) * 2), auto);
  gap: 2px;
}

.tier-name {
  background-color: hsl(40, 93%, 57%);
  display: flex;
  align-items: center;
  justify-content: center;

  > p {
    font-size: clamp(2rem, 2vw, 3rem);
    color: black;

    overflow-wrap: anywhere;
    text-align: center;
  }
}

.tier-items {
  display: flex;
  flex-flow: row wrap;
}

a, img {
  color: white;
  word-wrap: break-word;

  height: var(--item-height);
  width: var(--item-width);
}