<div class="frame">
  {{ template "frame title" .Title }}
  <div>
    <div class="pa3 flex flex-column g3">
      <div class="flex flex-column flex-row-ns g3">
        <div class="flex-shrink-0 flex justify-center">
          <div
            class="relative"
            style="
              width: {{ .Thumbnail.Width }}px;
              height: {{ .Thumbnail.Height }}px;
            "
          >
            <img
              class="pixelated inset"
              src="{{ static .Thumbnail.Filepath }}"
              alt="Video Thumbnail"
            />
            <a href="{{ .Url }}" target="_blank">
              <div class="absolute absolute--fill bg-black-30 flex justify-center items-center">
                <img class="pixelated" alt="Play Video" src="{{ dataimg "timemachine/win95-play.png" }}">
              </div>
            </a>
          </div>
        </div>
        <div class="flex flex-column g1">
          {{ range .Details }}
            <div><strong>{{ .Name }}:</strong> {{ .Content }}</div>
          {{ end }}
          {{ if .Horizontal }}
            <div class="bt mv2 b--dimmer dn db-ns"></div>
            <div class="post-content mt2 mt0-ns">
              {{ .Description }}
            </div>
          {{ end }}
        </div>
      </div>
      {{ if not .Horizontal }}
        <div class="post-content">
          {{ .Description }}
        </div>
      {{ end }}
      {{ with .AllSubmissionsUrl }}
        <div class="flex justify-end g3">
          <a href="{{ . }}"><div class="win95-btn">See&nbsp;<u>M</u>ore</div></a>
        </div>
      {{ end }}
    </div>
  </div>
</div>
