diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 495d855..7b8f6b6 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -167,3 +167,65 @@
.footer-logo:hover {
filter: contrast(0%) drop-shadow(7px 7px 5px grey);
}
+
+///////////////////////
+// ART GRID
+///////////////////////
+
+.art-grid {
+ --shift: 5px;
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+
+ & > figure > img {
+ border: 5px solid black;
+ box-shadow: var(--shift) var(--shift) 2px var(--shadow-colour);
+ translate: calc(var(--shift) * -1) calc(var(--shift) * -1);
+
+ @media (prefers-reduced-motion: no-preference) {
+ transition: box-shadow, translate;
+ transition-duration: 0.2s;
+ transition-timing-function: ease-in-out;
+
+ &:hover {
+ box-shadow: 0px 0px 0px var(--shadow-colour);
+ translate: none;
+ }
+ }
+ }
+
+ & > .art-col-2 {
+ grid-column: span 2;
+ }
+
+ & > .art-col-3 {
+ grid-column: span 3;
+ }
+
+ & > .art-row-2 {
+ grid-row: span 2;
+ }
+
+ & > .art-row-3 {
+ grid-row: span 3;
+ }
+}
+
+.art-home-grid {
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 10px;
+}
+
+@media only screen and (max-width: 768px) {
+ .art-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .art-home-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
\ No newline at end of file
diff --git a/content/art/_index.md b/content/art/_index.md
index 419eceb..11c5235 100644
--- a/content/art/_index.md
+++ b/content/art/_index.md
@@ -2,7 +2,12 @@
title: 'Art'
---
+
+
{{% image-box-link src="/art/animal/gorilla-baby.jpg" href="/art/animal" title="Animals" %}}
-{{% image-box-link src="/art/portrait/skull.jpg" href="/art/portrait" title="Portraits" %}}
+{{% image-box-link src="/art/portrait/updown.jpg" href="/art/portrait" title="Portraits" %}}
{{% image-box-link src="/art/sketchbook/flowers.jpg" href="/art/sketchbook" title="Sketchbook" %}}
-{{% image-box-link src="/art/life/brown-white.jpg" href="/art/life" title="Life" %}}
\ No newline at end of file
+{{% image-box-link src="/art/life/brown-white.jpg" href="/art/life" title="Life" %}}
+{{% image-box-link src="/art/digital/skull.png" href="/art/digital" title="Digital" %}}
+
+
\ No newline at end of file
diff --git a/content/art/animal/chimp.jpg b/content/art/animal/chimp.jpg
index 17b3df2..80dc729 100644
Binary files a/content/art/animal/chimp.jpg and b/content/art/animal/chimp.jpg differ
diff --git a/content/art/animal/chimp.png b/content/art/animal/chimp.png
new file mode 100644
index 0000000..154815e
Binary files /dev/null and b/content/art/animal/chimp.png differ
diff --git a/content/art/animal/dali.png b/content/art/animal/dali.png
new file mode 100644
index 0000000..40210e6
Binary files /dev/null and b/content/art/animal/dali.png differ
diff --git a/content/art/animal/gorilla-baby.jpg b/content/art/animal/gorilla-baby.jpg
index 25699be..af3ac67 100644
Binary files a/content/art/animal/gorilla-baby.jpg and b/content/art/animal/gorilla-baby.jpg differ
diff --git a/content/art/animal/index.md b/content/art/animal/index.md
index 7c4f819..678ab39 100644
--- a/content/art/animal/index.md
+++ b/content/art/animal/index.md
@@ -2,8 +2,14 @@
title: 'Animals'
---
-{{< figure src="zu.jpg" >}}
-{{< figure src="zu-charcoal.jpg" >}}
-{{< figure src="orangutan.jpg" >}}
-{{< figure src="gorilla-baby.jpg" >}}
-{{< figure src="chimp.jpg" >}}
+{{< art-grid >}}
+
+ {{< figure src="zu.jpg" >}}
+ {{< figure src="zu-charcoal.jpg" class="art-col-2" >}}
+ {{< figure src="orangutan.jpg" >}}
+ {{< figure src="gorilla-baby.jpg" >}}
+ {{< figure src="dali.png" >}}
+ {{< figure src="chimp.jpg" >}}
+ {{< figure src="chimp.png" >}}
+
+{{< /art-grid >}}
diff --git a/content/art/animal/orangutan.jpg b/content/art/animal/orangutan.jpg
index b08c6f4..fa8edfd 100644
Binary files a/content/art/animal/orangutan.jpg and b/content/art/animal/orangutan.jpg differ
diff --git a/content/art/animal/zu.jpg b/content/art/animal/zu.jpg
index a2deb77..603007a 100644
Binary files a/content/art/animal/zu.jpg and b/content/art/animal/zu.jpg differ
diff --git a/content/art/digital/arms-up.png b/content/art/digital/arms-up.png
new file mode 100644
index 0000000..69a53e3
Binary files /dev/null and b/content/art/digital/arms-up.png differ
diff --git a/content/art/digital/index.md b/content/art/digital/index.md
new file mode 100644
index 0000000..96fb87a
--- /dev/null
+++ b/content/art/digital/index.md
@@ -0,0 +1,12 @@
+---
+title: 'Digital'
+---
+
+{{< art-grid >}}
+
+ {{< figure src="/art/portrait/skull.jpg" >}}
+ {{< figure src="tilt.png" >}}
+ {{< figure src="/images/holo-avatar.jpg" >}}
+ {{< figure src="arms-up.png" >}}
+
+{{< /art-grid >}}
diff --git a/content/art/digital/tilt.png b/content/art/digital/tilt.png
new file mode 100644
index 0000000..0aa0c62
Binary files /dev/null and b/content/art/digital/tilt.png differ
diff --git a/content/art/life/bikini.jpg b/content/art/life/bikini.jpg
index 37b3eac..e0448af 100644
Binary files a/content/art/life/bikini.jpg and b/content/art/life/bikini.jpg differ
diff --git a/content/art/life/blue.png b/content/art/life/blue.png
new file mode 100644
index 0000000..8649151
Binary files /dev/null and b/content/art/life/blue.png differ
diff --git a/content/art/life/brown-white.jpg b/content/art/life/brown-white.jpg
index d382839..799bfac 100644
Binary files a/content/art/life/brown-white.jpg and b/content/art/life/brown-white.jpg differ
diff --git a/content/art/life/grey.jpg b/content/art/life/grey.jpg
index 769681f..fa65500 100644
Binary files a/content/art/life/grey.jpg and b/content/art/life/grey.jpg differ
diff --git a/content/art/life/index.md b/content/art/life/index.md
index c893323..f870937 100644
--- a/content/art/life/index.md
+++ b/content/art/life/index.md
@@ -2,7 +2,13 @@
title: 'Life'
---
-{{< figure src="bikini.jpg" >}}
-{{< figure src="brown-white.jpg" >}}
-{{< figure src="grey.jpg" >}}
-{{< figure src="red-blue.jpg" >}}
+{{< art-grid >}}
+
+ {{< figure src="bikini.jpg" >}}
+ {{< figure src="brown-white.jpg" class="art-col-2" >}}
+ {{< figure src="grey.jpg" >}}
+ {{< figure src="red-blue.jpg" >}}
+ {{< figure src="blue.png" >}}
+ {{< figure src="ink-pencil.png" >}}
+
+{{< /art-grid >}}
\ No newline at end of file
diff --git a/content/art/life/ink-pencil.png b/content/art/life/ink-pencil.png
new file mode 100644
index 0000000..b02c404
Binary files /dev/null and b/content/art/life/ink-pencil.png differ
diff --git a/content/art/life/red-blue.jpg b/content/art/life/red-blue.jpg
index 8ed1724..a9e6671 100644
Binary files a/content/art/life/red-blue.jpg and b/content/art/life/red-blue.jpg differ
diff --git a/content/art/portrait/freddie.jpg b/content/art/portrait/freddie.jpg
index feedc39..d39ebe1 100644
Binary files a/content/art/portrait/freddie.jpg and b/content/art/portrait/freddie.jpg differ
diff --git a/content/art/portrait/girlskull.jpg b/content/art/portrait/girlskull.jpg
index 199f346..b193dba 100644
Binary files a/content/art/portrait/girlskull.jpg and b/content/art/portrait/girlskull.jpg differ
diff --git a/content/art/portrait/index.md b/content/art/portrait/index.md
index 590aa5f..5628e8d 100644
--- a/content/art/portrait/index.md
+++ b/content/art/portrait/index.md
@@ -2,10 +2,17 @@
title: 'Portrait'
---
-{{< figure src="freddie.jpg" >}}
-{{< figure src="girlskull.jpg" >}}
-{{< figure src="head-back.jpg" >}}
-{{< figure src="self.jpg" >}}
-{{< figure src="skull.jpg" >}}
-{{< figure src="tyler.jpg" >}}
-{{< figure src="updown.jpg" >}}
+{{< art-grid >}}
+
+ {{< figure src="freddie.jpg" >}}
+ {{< figure src="girlskull.jpg" >}}
+ {{< figure src="head-back.jpg" >}}
+ {{< figure src="self.jpg" >}}
+ {{< figure src="/art/sketchbook/line-face.jpg" >}}
+ {{< figure src="/art/sketchbook/bran.jpg" >}}
+ {{< figure src="/art/sketchbook/mushroom.jpg" >}}
+ {{< figure src="skull.jpg" >}}
+ {{< figure src="tyler.jpg" >}}
+ {{< figure src="updown.jpg" >}}
+
+{{< /art-grid >}}
\ No newline at end of file
diff --git a/content/art/portrait/tyler.jpg b/content/art/portrait/tyler.jpg
index 7843890..a2c4369 100644
Binary files a/content/art/portrait/tyler.jpg and b/content/art/portrait/tyler.jpg differ
diff --git a/content/art/portrait/updown.jpg b/content/art/portrait/updown.jpg
index 5b319f5..d5dcd29 100644
Binary files a/content/art/portrait/updown.jpg and b/content/art/portrait/updown.jpg differ
diff --git a/content/art/sketchbook/blindfold.jpg b/content/art/sketchbook/blindfold.jpg
index 5fad6c9..659730d 100644
Binary files a/content/art/sketchbook/blindfold.jpg and b/content/art/sketchbook/blindfold.jpg differ
diff --git a/content/art/sketchbook/bran.jpg b/content/art/sketchbook/bran.jpg
index 355089d..e7567f4 100644
Binary files a/content/art/sketchbook/bran.jpg and b/content/art/sketchbook/bran.jpg differ
diff --git a/content/art/sketchbook/buildings.jpg b/content/art/sketchbook/buildings.jpg
index 8ed58cd..0d5e3fc 100644
Binary files a/content/art/sketchbook/buildings.jpg and b/content/art/sketchbook/buildings.jpg differ
diff --git a/content/art/sketchbook/flowers.jpg b/content/art/sketchbook/flowers.jpg
index 58ffd99..7eb9a35 100644
Binary files a/content/art/sketchbook/flowers.jpg and b/content/art/sketchbook/flowers.jpg differ
diff --git a/content/art/sketchbook/hand-muscle.jpg b/content/art/sketchbook/hand-muscle.jpg
index 0e073ac..c74ebf0 100644
Binary files a/content/art/sketchbook/hand-muscle.jpg and b/content/art/sketchbook/hand-muscle.jpg differ
diff --git a/content/art/sketchbook/index.md b/content/art/sketchbook/index.md
index c9fcd2c..67e8c76 100644
--- a/content/art/sketchbook/index.md
+++ b/content/art/sketchbook/index.md
@@ -2,13 +2,20 @@
title: 'Sketchbook'
---
-{{< figure src="blindfold.jpg" >}}
-{{< figure src="bran.jpg" >}}
-{{< figure src="buildings.jpg" >}}
-{{< figure src="flowers.jpg" >}}
-{{< figure src="grey.jpg" >}}
-{{< figure src="hand-muscle.jpg" >}}
-{{< figure src="line-face.jpg" >}}
-{{< figure src="mushroom.jpg" >}}
-{{< figure src="smoke.jpg" >}}
-{{< figure src="spindly.jpg" >}}
+{{< art-grid >}}
+
+ {{< figure src="blindfold.jpg" >}}
+ {{< figure src="bran.jpg" >}}
+ {{< figure src="buildings.jpg" >}}
+ {{< figure src="flowers.jpg" >}}
+ {{< figure src="grey.jpg" >}}
+ {{< figure src="hand-muscle.jpg" >}}
+ {{< figure src="ok.png" >}}
+ {{< figure src="music.png" class="art-col-2" >}}
+ {{< figure src="line-face.jpg" >}}
+ {{< figure src="mushroom.jpg" >}}
+ {{< figure src="kawagawa.png" >}}
+ {{< figure src="smoke.jpg" >}}
+ {{< figure src="spindly.jpg" >}}
+
+{{< /art-grid >}}
diff --git a/content/art/sketchbook/kawagawa.png b/content/art/sketchbook/kawagawa.png
new file mode 100644
index 0000000..c101bd6
Binary files /dev/null and b/content/art/sketchbook/kawagawa.png differ
diff --git a/content/art/sketchbook/line-face.jpg b/content/art/sketchbook/line-face.jpg
index 53765ba..ba72ea3 100644
Binary files a/content/art/sketchbook/line-face.jpg and b/content/art/sketchbook/line-face.jpg differ
diff --git a/content/art/sketchbook/mushroom.jpg b/content/art/sketchbook/mushroom.jpg
index 1a88d50..d368b57 100644
Binary files a/content/art/sketchbook/mushroom.jpg and b/content/art/sketchbook/mushroom.jpg differ
diff --git a/content/art/sketchbook/music.png b/content/art/sketchbook/music.png
new file mode 100644
index 0000000..c1992d8
Binary files /dev/null and b/content/art/sketchbook/music.png differ
diff --git a/content/art/sketchbook/ok.png b/content/art/sketchbook/ok.png
new file mode 100644
index 0000000..8fddeb1
Binary files /dev/null and b/content/art/sketchbook/ok.png differ
diff --git a/content/art/sketchbook/smoke.jpg b/content/art/sketchbook/smoke.jpg
index d7ac2b3..345ccb4 100644
Binary files a/content/art/sketchbook/smoke.jpg and b/content/art/sketchbook/smoke.jpg differ
diff --git a/content/art/sketchbook/spindly.jpg b/content/art/sketchbook/spindly.jpg
index e206a03..9b9811e 100644
Binary files a/content/art/sketchbook/spindly.jpg and b/content/art/sketchbook/spindly.jpg differ
diff --git a/layouts/shortcodes/art-grid.html b/layouts/shortcodes/art-grid.html
new file mode 100644
index 0000000..ee00677
--- /dev/null
+++ b/layouts/shortcodes/art-grid.html
@@ -0,0 +1,3 @@
+
+ {{ .Inner }}
+
\ No newline at end of file