<style>

/* Discographys */
#discog {

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: .5em;
    line-height: 1.75em;
    max-width: 33vw;

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


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

    img {
      width: 100%;
      object-fit: cover;
      max-height: 300px;
    }


  }
  figcaption {
    font-family: Sigoil, 'Arial', 'Helvetica', sans-serif;
    background-color: black;
    color: white;
    height: 286px;
    padding: 20px;
    margin-bottom: 4px;
    border-color: purple;
    border-width: 10px;
    color: orange;
    z-index: 100;
    position: relative;
    text-decoration: none;
    line-height: 1.25em;
    overflow-y: hidden;

  }
  .section-headers {
    padding: 80px;
    border-style: double;
    border-color: purple;
    border-width: 10px;
    flex: 1 1 100%;

    margin-top: 0;
  }
}

</style>

{{ $data := dict }}
{{ $url := "https://shop.basspistol.com/podcast.rss" }}

<section id="discog">
  <article class="section-headers">
    <h2>Discography</h2>
    <p><strong>The sound of freedom</strong><br />
    The Basspistol catalogue is an aggregation of records from independent musicians. Getting your music from here implies 100% of your support is channeled straight to the artist.
    <br /><br />
    They are not sorted by date or importance. Instead, every 30 minutes the order is reshuffled. You being here now, implies the random gods have something to tell you.
    <br /><br />
    <a href="https://shop.basspistol.com" style="text-decoration: underline;">Check out the Tienda for more information</a>
    </p>
  </article>


{{ with try (resources.GetRemote $url) }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else with .Value }}
    {{ $data = . | transform.Unmarshal }}
  {{ else }}
    {{ errorf "Unable to get remote resource %q" $url }}
  {{ end }}
{{ end }}

{{ with $data.channel.item }}

  {{ range . | shuffle }}
    <article>

    <a href="{{ .link }}" target="_blank">

    <figure>
      {{ range .image }}
      <img src="{{ . }}" />
      {{ end }}
        <figcaption>
        <p><strong>{{ .title }}</strong></p>
        <p>&nbsp;</p>
        <p>{{ .description | transform.Plainify | safeHTML | truncate 256 }}</p>

      </figcaption>
    </figure>
    </a>
    </article>
  {{ end }}

{{ end }}


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


</section>
