<ul class="photos-list">
	{{ range . }}
	<li>
		<a href="{{ .Permalink }}">
			{{ $page := . }}
			{{ $alt := or .Title "image" }}
			<figure class="photo">
				{{ with resources.GetMatch .Params.photo_asset}}

				{{ $smallw := default "640x webp Lanczos" }}
				{{ $mediumw := default "960x webp Lanczos" }}
				{{ $largew := default "1280x webp Lanczos" }}

				{{ $page.Scratch.Set "small" (.Resize $smallw) }}
				{{ $page.Scratch.Set "medium" (.Resize $mediumw) }}
				{{ $page.Scratch.Set "large" (.Resize $largew) }}

				{{ $small := $page.Scratch.Get "small" }}
				{{ $medium := $page.Scratch.Get "medium" }}
				{{ $large := $page.Scratch.Get "large" }}

				<picture>
					<source media="(max-width: 80rem)" srcset="{{ $small.Permalink }}" />
					<source media="(max-width: 100rem)" srcset="{{ $medium.Permalink }}" />
					<img class="photo-asset" src="{{ $large.Permalink }}" alt="{{ $alt }}" title="{{ $alt }}">
				 </picture>
				{{ end }}
				<figcaption class="photo-details">
					<p class="photo-title">{{ .Title }}</p>
					<p class="photo-summary">{{ .Summary }}</p>
				</figcaption>
			</figure>
		</a>
	</li>
	{{end}}
</ul>