<head>
  <style>
    .tilelist {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;      
    }
    @media screen and (min-width: 900px) {
      .tile {
        position: relative;
        width: 30%;
        height: 170px;
        margin: 10px 7px;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        border-radius: 3px;
      }
    }
    @media screen and (max-width: 900px) and (min-width: 540px) {
      .tile {
        position: relative;
        width: 40%;
        height: 170px;
        margin: 10px 7px;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        border-radius: 3px;
      }
    }
    @media screen and (max-width: 540px) {
      .tile {
        position: relative;
        width: 80%;
        height: 170px;
        margin: 10px 7px;
        box-shadow: 0 2px 5px #ccc;
        overflow: hidden;
        border-radius: 3px;
      }
    }
    .tile:hover {
      box-shadow: 0px 0px 5px 2px #67c5ff;
    }
    .tile img {
      width: 100% !important;
      height: 130px;
      object-fit: cover;
      margin: 0 0 !important;
    }
    .tile .caption {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      width: 100%;
      height: 40px;
      top: 130px;
      left: 0;
      color: #000;
      background-color: #fff;
      font-size: 18px;
      word-break: keep-all;
    }
    .tile .caption div {
      line-height: 20px;
      text-align: center;
    }
  </style>
</head>

{{ $section := .Page.CurrentSection }}
{{ if .Get "path" }}
  {{ $path := .Get "path" }}
  {{ with ($.Site.GetPage "section" $path) }}
    {{ $section = .CurrentSection }}
  {{ end }}
{{ end }} 

<div class="tilelist">
  <!-- For section pages -->
  {{ range $section.Sections.ByWeight }}  
    {{ if .Params.mktile }}
      <a href="{{ .Permalink }}" class="tile">
        <img src="{{ $.Site.BaseURL }}{{ .Param "image" }}" alt={{ .Title }} title={{ .Title }}>
	<div class="caption">
	  <div>{{ .Title }}</div>
	</div>
      </a>
    {{ end }}
  {{ end }}  

  <!-- For single pages -->
  {{ range $section.Pages.ByWeight }}  
    {{ if .Params.mktile }}
      <a href="{{ .Permalink }}" class="tile">
        <img src="{{ $.Site.BaseURL }}{{ .Param "image" }}" alt={{ .Title }} title={{ .Title }}>
	<div class="caption">
	  <div>{{ .Title }}</div>
	</div>
      </a>
    {{ end }}
  {{ end }}  
</div>
