<style>
#gang {

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  a {
    text-decoration: none;
  }
  article {
    margin:2px;
    flex: 1 1 300px;

  }
  h2 {
      font-size: 12em;
  /*    text-transform: uppercase;*/
      line-height: 1em;
      flex: 1 1 100%;
  }

  p {
    flex: 1 1 100%;
    font-size: .6em;
    line-height: 1.75em;
    max-width: 33vw;

    strong {
      font-size: 1.25em;
    }
  }
  @media screen and (max-width: 1024px) {
    h2 {
      font-size: 8em;
    }
    p {
      font-size: .9em;
      max-width: unset;
    }
      strong {
        font-size: 1.5em;
    }
  }


  figure {
    padding: 4px;
    margin: auto;
    border-style: double;
    border-color: purple;
    border-width: 10px;
    display: flex;

    img {
      width: 100%;
      object-fit: cover;
      width: 96px;
      flex: 0 0 96px;
      max-height: 96px;
    }
    figcaption {

      overflow-x: hidden;
      overflow-wrap: break-word;
      font-weight: bold;
  /*    font-style: italic;*/
      background-color: black;
      color: white;
      padding: 20px;
      text-align: center;
      color: orange;
      z-index: 100;
      position: relative;
      text-decoration: none;
      margin-bottom: 4px;
      text-transform: lowercase;

    }
  }

}

</style>

<section id="gang">
  <div class="section-headers">
    <h2>Gung</h2>
    <h4>𝕷𝖎𝖓𝖐 𝕽𝖔𝖔𝖙</h4>
    <p>The Basspistol network is composed of Powerful Syndicated Artists and Groups. These links are presented to you, ordered by the random god. </p><p>Follow the white Rabbit, Neo!</p>

    <a class="button" href="https://matrix.to/#/#hq:basspistol.org">Come say Hi! 🐇</a>
  </div>

  {{/* prebuild/layouts/index.html */}}
  {{ $url := "https://s.basspistol.org/api/pinned-users" }}
  {{ $opts := dict
    "method" "post"
    "body" `{"complete": true}`
    "headers" (dict  "Content-Type" "application/json")
  }}
  {{ with resources.GetRemote $url $opts }}
    {{ $monsters := unmarshal .Content }}
    {{ range $monsters | shuffle }}

  <article>

    {{ if .uri }}
    <a href="{{ .uri }}" target="_blank">
    {{ else }}
    <a href="https://s.basspistol.org/@{{ .username }}" target="_blank">
    {{ end }}
    <figure>

      <img src="{{ .avatarUrl }}" />
      <figcaption>
        <h4>{{ .username }}</h4>
      </figcaption>
    </figure>
    </a>
  </article>

    {{ end }}

<!--    <pre>{{ debug.Dump $monsters }}</pre>-->

  {{ end }}
  <article class="section-footers">
</section>
