brk/website_next/wallets/start/style.css

main.wallets {
  .start {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem);
    gap: 4rem;
    align-items: center;
    width: min(100%, 68rem);
    min-height: calc(100dvh - 2 * var(--offset));
    margin-inline: auto;

    @media (max-width: 56rem) {
      grid-template-columns: 1fr;
      gap: 2rem;
      align-content: center;
      width: min(100%, 39rem);
      margin-inline: 0 auto;
    }

    > article {
      display: grid;
      gap: 0.875rem;
    }

    h1 {
      margin: 0;
      font-size: 4.5rem;
      font-weight: 400;
      line-height: 0.95;

      span {
        color: var(--orange);
      }

      @media (max-width: 34rem) {
        font-size: 3.5rem;
      }
    }

    p {
      margin: 0;
    }

    > article > p:first-of-type {
      max-width: 35rem;
      color: var(--white);
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
    }

    > article > ul {
      display: grid;
      gap: 0.75rem;
      margin: 0.5rem 0 0;
      padding: 0;
      list-style: none;
    }

    > article li {
      display: grid;
      grid-template-columns: 1rem minmax(0, 1fr);
      gap: 0.75rem;
      max-width: 34rem;
      color: var(--white);
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);

      &::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border: 1px solid var(--orange);
        border-radius: 50%;
        margin-top: 0.5rem;
      }
    }

    > article > hr {
      width: min(100%, 34rem);
      height: 0.5px;
      border: 0;
      margin: 0.125rem 0 0;
      background: var(--gray);
    }

    > article > p:last-of-type {
      max-width: 34rem;
      color: var(--gray);
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);
    }

    > div {
      display: grid;
      gap: 0.875rem;
      width: 100%;

      > section {
        display: grid;
        gap: 0.5rem;
      }

      > p {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 0.625rem;
        align-items: center;
        color: var(--gray);
        font-size: var(--font-size-xs);
        line-height: 1;

        &::before {
          content: "";
          height: 0.5px;
          background: var(--gray);
        }

        &::after {
          content: "";
          height: 0.5px;
          background: var(--gray);
        }
      }

      h2 {
        margin: 0;
        color: var(--white);
        font-family: var(--font-mono);
        font-size: var(--font-size-sm);
        font-weight: 400;
        line-height: var(--line-height-sm);
      }

      p {
        color: var(--gray);
        font-size: var(--font-size-sm);
        line-height: var(--line-height-sm);
      }

      form {
        --height: 2.375rem;

        display: flex;
        gap: 0;
        width: 100%;
        font-size: var(--font-size-sm);

        :is(input, button) {
          height: var(--height);
          padding: 0 1rem;
          font: inherit;
          line-height: 1;
        }

        input {
          flex: 1 1 auto;
          display: block;
          min-block-size: 0;
          border: 1px solid var(--gray);
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          color: var(--white);
          background: transparent;

          &::placeholder {
            color: var(--gray);
          }
        }

        button {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }

        @media (max-width: 34rem) {
          flex-direction: column;

          input {
            border-top-right-radius: 0.375rem;
            border-bottom-left-radius: 0;
          }

          button {
            border-top-right-radius: 0;
            border-bottom-left-radius: 0.375rem;
          }
        }
      }

      > section:last-child {
        font-size: var(--font-size-sm);
      }

      > section:last-child > button {
        width: 100%;
      }
    }
  }
}