@layer components {
  .html-to-text__header {
    text-align: center;
  }

  .html-to-text__subtitle {
    color: var(--color-ink-light);
    font-size: var(--text-lg);
  }

  .html-to-text__layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
  }

  .html-to-text__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block-start: 1.75rem;
  }

  .html-to-text__actions .btn {
    white-space: nowrap;
  }

  .html-to-text__stats {
    min-height: 1.25rem;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    text-align: right;
  }

  .html-to-text__info {
    padding-block-start: var(--block-space);
    border-top: 1px solid var(--color-border);
  }

  .html-to-text__info h2 {
    font-size: var(--text-xl);
    margin-block-end: 0.75rem;
  }

  .html-to-text__info ul {
    margin: 0;
    padding-left: 1.25rem;
  }

  .html-to-text__info li {
    margin-block: 0.375rem;
    color: var(--color-ink-light);
  }

  @media (max-width: 64rem) {
    .html-to-text__layout {
      grid-template-columns: 1fr;
    }

    .html-to-text__actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      padding-block-start: 0;
    }

    .html-to-text__actions > :first-child {
      grid-column: 1 / -1;
    }

    .html-to-text__actions .btn {
      inline-size: 100%;
    }
  }
}