<script setup lang="ts">
import Headings from "./Headings.vue";
import Paragraphs from "./Paragraphs.vue";
import Labels from "./Labels.vue";
import TextSelection from "./TextSelection.vue";
import { GrHeading } from "@/components";
import { GrParagraph } from "@/components";
</script>

<template>
  <main id="typography-main">
    <div class="separate">
      <GrHeading as="h2">Verdee typography</GrHeading>
      <GrParagraph>
        Verdee fornece um conjunto de estilos tipográficos. Esses estilos mapeiam o máximo possível as funções
        funcionais para que você saiba quando cada uma pode ser usada.
      </GrParagraph>
    </div>

    <hr />

    <section style="margin-top: 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 15px">
      <Headings />

      <hr />

      <Paragraphs />

      <Labels />

      <hr />

      <TextSelection />
    </section>
  </main>
</template>

<style lang="scss" scoped>
hr {
  border: 1px solid var(--gray-50);
}

main {
  max-width: 935px;
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  @media (max-width: 768px) {
    padding: 0 var(--spacing-6);
  }
}

@media (max-width: 768px) {
  :global(#typography-main section:has(section+section)) {
    flex-wrap: wrap;
  }
}
</style>
