---
order: 4
---
<section id="artworks">
	<article>
		<nav>
			<ul role="list">
				{% assign sortedArtworks = collections.artworks | sortByFirstDate %} {%for artwork in sortedArtworks %}
				<li>
					<a href="{{artwork.page.url}}">
						<figure>
							{%if artwork.data.images[0]%}
							<span>
							<img src="{{artwork.data.images[0].src}}" alt="" style="{%if artwork.data.images[0].pixel%}image-rendering: pixelated;{%endif%}{%if artwork.data.images[0].position%}object-position:{{artwork.data.images[0].position}};{%endif%}{%if artwork.data.images[0].fit%}object-fit:{{artwork.data.images[0].fit}}{%endif%}"/>
							</span>
							<figcaption>
								{{artwork.page.fileSlug}}{%if artwork.data.images.size > 1%}
								<p class="count">(+{{artwork.data.images.size| minus: 1}})</p>
								{%endif%}
							</figcaption>
							{% if artwork.data.images[0].date %}
							<time datetime="{{artwork.data.images[0].date|ISO}}">{{artwork.data.images[0].date|readable}}</time>
							{%endif%} {%endif%}
						</figure>
					</a>
				</li>
				{% endfor %}
			</ul>
		</nav>
	</article>
	<article>
		<nav>
			<ul role="list">
				{%assign sortedFanarts = collections.fanarts|sortByFirstDate%} {%for
				fanart in sortedFanarts%}
				<li>
					<a href="{{fanart.page.url}}">
						<figure>
							{%if fanart.data.images[0]%}
							<img src="{{fanart.data.images[0].src}}" alt="" style="{%if fanart.data.images[0].pixel%}image-rendering: pixelated;{%endif%}{%if fanart.data.images[0].position%}object-position:{{fanart.data.images[0].position}};{%endif%}{%if fanart.data.images[0].fit%}object-fit:{{fanart.data.images[0].fit}}{%endif%}"/>
							<figcaption>{{fanart.page.fileSlug}}</figcaption>
							{%if fanart.data.images[0].date%}
							<time datetime="{{fanart.data.images[0].date|ISO}}">{{fanart.data.images[0].date|readable}}</time>
							{%endif%} {%endif%}
						</figure>
					</a>
				</li>
				{% endfor %}
			</ul>
		</nav>
	</article>
</section>