.md-typeset {
  .banner {
    height: 200px;
    width: 100%;
    object-fit: cover;
  }

  .aside {
    grid-template-columns: 3fr 1fr;
    gap: 1.6rem;

    .grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .hotbar {
    margin-left: auto;
    margin-right: auto;

    grid-template-columns: repeat(2, 1fr);

    p > .twemoji {
      font-size: 1.6rem;
    }

    @media screen and (min-width: 1220px) {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      grid-template-columns: unset;
    }
  }

  .members {
    grid-template-columns: repeat(2, 1fr);

    @media screen and (min-width: 1220px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .progress {
    margin-left: auto;
    margin-right: auto;
    
    max-width: 600px;
    grid-template-columns: repeat(5, auto);
    align-items: center;
  }

  .inline-icon {
    display: inline-block;
    height: 1.6em;
    margin-bottom: -0.4em;
  }

  .curseforge {
    --md-primary-fg-color: #f16436;
    --md-accent-fg-color: #ff784d;
  }

  .modrinth {
    --md-primary-fg-color: #1bd96a;
    --md-accent-fg-color: #22ff84;
  }

  .avatar {
    border-radius: 9999px;
  }

  .chip {
    background: var(--md-primary-fg-color);
    border-radius: 9999px;
    padding: 0.4em 0.8em;
    cursor: default;

    transition: background 125ms;

    &:hover {
      background: var(--md-accent-fg-color);
    }
  }
}