---
layout: default
---

<section
  class="
    media
    container
    max-w-screen-xl
    flex flex-col
    sm:flex-row
    pt-10
    pb-8
    lg:py-10
    border-b
  "
>
  <div
    class="
      heading-block
      w-full
      sm:w-2/12
      lg:w-3/12
      flex
      lg:justify-center
      items-start
      pb-3
      sm:pb-0
    "
  >
    <a class="link link--back" href="{{site.url}}{{ site.baseurl }}">Back</a>
  </div>
  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
    <h1 class="text-xl md:text-xxl mb-5 lg:mb-16 sm:max-w-md lg:max-w-xl">
      Media
    </h1>
    <div
      class="
        media__cards
        container
        mx-auto
        lg:mx-0
        flex flex-col flex-wrap
        sm:flex-row
        lg:max-w-4xl
        sl:justify-between
      "
    >
      {% for mediapost in site.data.media %}
      <div
        class="media__card flex flex-col w-full sl:max-w-48 mb-5 sm:mb-0 group"
      >
      <a href="{{ mediapost.link }}" target="_blank" rel="noopener noreferrer">     
        <img
          src="{{ mediapost.image }}"
          class="w-full mb-2 group-hover:opacity-75"
          alt="Media preview image"
        />
        <li class="flex flex-col w-full mb-5 lg:mb-8">
          <time class="text-xxs opacity-75"
            >{{ mediapost.date | date: '%B %d, %Y' }}</time
          ><p
            class="text-xs lg:text-base font-semibold group-hover:underline"
            >{{ mediapost.title }}
            </p>
            </a
          >
        </li>
      </div>
      {% endfor %}
    </div>
  </div>
</section>