@charset "utf-8";

/* -------------------------------------------------------------- */
/* top
/* -------------------------------------------------------------- */
.glyph {
  max-width: $maxWidth;
  margin: 0 auto;
  &__list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
  }
  &__item {
    @extend %clearfix;
    display: flex;
    flex: 1 0 200px;
    flex-direction: column;
    align-items: center;
    margin: 12px 12px 20px 12px;
    padding: 16px;
    list-style-type: none;
    background-color: lighten($colorGrayLighten, 2%);
    border-radius: 8px;
  }
  &__icon {
    color: $colorBlack;
    font-size: 1.8rem;
    margin-bottom: 12px;
  }
  &__name,
  &__codepoint {
    line-height: 1;
  }
  &__name {
    color: $colorBlack;
    font-size: 1rem;
    margin-bottom: 8px;
  }
  &__codepoint {
    color: transparentize($colorBlack, 0.4);
    font-size: 0.8rem;
  }
}
