#game-market-profile-view {
  > header[purpose="toolbar"] {
    > button[action="logout"] {
      @media (max-width: 470px) {
        padding: 0;


        span {
          display: none;
        }
      }
    }
  }


  > main {
    padding-block: 6.4rem;
    padding-inline: 1.6rem;
    display: grid;
    align-content: safe center;
    justify-content: center;
    justify-items: center;
    row-gap: 1.6rem;


    > .matrix {
      width: 32rem;
      display: grid;
      place-items: center;
      gap: 1.6rem;
      text-align: center;
      font-size: 1.4rem;
      white-space: balance;
    }


    > .fields {
      display: grid;
      grid-template-columns: auto 1fr;
      row-gap: 1.6rem;
      width: calc(100vw - 3.2rem);
      max-width: 36rem;


      > * {
        grid-column: 1 / -1;
      }


      > .field {
        display: grid;
        grid-template-columns: subgrid;
        align-items: center;


        > .label {
          grid-column: 1 / -1;
          display: grid;
          grid-template-columns: subgrid;


          span {
            justify-self: end;
            align-self: center;
            border: 1px solid var(--toolbar-border-color);
            border-right: none;
            border-top-left-radius: 100vmax;
            border-bottom-left-radius: 100vmax;
            padding-left: 1.6rem;
            padding-right: 0.8rem;
            width: fit-content;
            height: 100%;
            align-content: center;
            font-weight: 600;
            background: var(--toolbar-background-color);
          }


          input {
            border: 1px solid var(--toolbar-border-color);
            border-top-right-radius: 100vmax;
            border-bottom-right-radius: 100vmax;
            padding-left: 0.8rem;
            padding-right: 1.6rem;
            min-width: 0;
            width: 100%;
            height: 3.6rem;
          }
        }


        > p {
          grid-column: 2 / 3;
          margin-top: 0.8rem;
          border-left: 1px solid transparent;
          padding-left: 0.8rem;
          padding-right: 1.6rem;
          font-size: 1.3rem;
          line-height: 1.3;
          word-break: normal;
          overflow-wrap: break-word;
          hyphens: auto;
          color: var(--color-gray);

          &.status {
            &:empty::before {
              content: attr(data-status);
            }

            &:not(:empty) {
              color: var(--color-red);
            }
          }
        }
      }


      > hr {
        border: none;


        &.divider {
          justify-self: center;
          border-radius: 100vmax;
          width: 12.8rem;
          width: 100%;
          height: 0.4rem;
          background: var(--toolbar-background-color);
        }
      }
    }


    > .statistics {
      text-align: center;
      font-size: 1.4rem;
    }
  }
}