.preference {
  height: 100%;

  > main {
    padding: 48px 24px;
    max-width: 640px;
    margin: 0 auto;

    h1 {
      font-weight: 500;
      font-size: 24px;
      color: var(--color-font-2);
    }

    h2 {
      margin: 0;
      padding: 2rem 0 1rem 0;
      font-size: 18px;
      font-weight: 400;
      color: var(--color-font-2);
    }

    p {
      display: flex;
      align-items: center;
      color: var(--color-font-2);
      line-height: 1.3;
      cosy-label {
        margin: 0 4px;
      }
      &.font-size-preview {
        font-size: var(--font-size);
      }
    }

    > section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2rem 0;

      > div {
        h3 {
          font-size: 15px;
          font-weight: 400;
          color: var(--color-font);
        }

        p {
          margin-bottom: 0;
        }
      }
    }

    #theme-color {
      width: 16px;
      height: 16px;
      border-radius: var(--radius-base, 4px);
    }
  }
}
