<script setup lang="ts">
import { GrHeading } from "@/components";
import { GrParagraph } from "@/components";
</script>

<template>
  <GrHeading as="h3" weight="medium">Paragraphs</GrHeading>
  <GrParagraph fontSize="sm" color="gray-100">Uso em textos corridos, paragrafos e descrições</GrParagraph>

  <section style="margin-top: 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 15px">
    <section style="display: flex; gap: 20px">
      <section>
        <GrParagraph weight="medium" font-size="base">
          Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub roof party. Meggings cred before they sold
          out messenger bag, ugh fashion axe Pitchfork tousled freegan asymmetrical literally twee Thundercats. <br />
          <span class="legend">P16</span>
          <br />
        </GrParagraph>
        <hr />
      </section>

      <section>
        <GrParagraph weight="bold" font-size="base">
          Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub roof party. Meggings cred before they sold
          out messenger bag, ugh fashion axe Pitchfork tousled freegan asymmetrical literally twee Thundercats. <br />
          <span class="legend">P16 - Bold</span>
          <br />
        </GrParagraph>
        <hr />
      </section>
    </section>

    <section style="display: flex; gap: 20px">
      <section>
        <GrParagraph weight="medium" font-size="sm">
          Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub roof party. Meggings cred before they sold
          out messenger bag, ugh fashion axe Pitchfork tousled freegan asymmetrical literally twee Thundercats. <br />
          <span class="legend">P14</span>
          <br />
        </GrParagraph>
        <hr />
      </section>

      <section>
        <GrParagraph weight="bold" font-size="sm">
          Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub roof party. Meggings cred before they sold
          out messenger bag, ugh fashion axe Pitchfork tousled freegan asymmetrical literally twee Thundercats. <br />
          <span class="legend">P14 - Bold</span>

          <br />
        </GrParagraph>
        <hr />
      </section>
    </section>

    <section style="display: flex; gap: 20px">
      <section>
        <GrParagraph weight="medium" font-size="sm">
          Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub roof party. Meggings cred before they sold
          out messenger bag, ugh fashion axe Pitchfork tousled freegan asymmetrical literally twee Thundercats. <br />
          <span class="legend"> P12 </span>
          <br />
        </GrParagraph>
        <hr />
      </section>

      <section>
        <GrParagraph weight="bold" font-size="sm">
          Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub roof party. Meggings cred before they sold
          out messenger bag, ugh fashion axe Pitchfork tousled freegan asymmetrical literally twee Thundercats. <br />
          <span class="legend"> P12 - Bold </span>
          <br />
        </GrParagraph>
        <hr />
      </section>
    </section>
  </section>
</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);
}

.legend {
  font-family: Plus Jakarta Sans;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  display: block;
  color: #009488;
  margin: 10px 0;
}
</style>
