diff --git a/src/App.vue b/src/App.vue
index dbcee3c..43b7acd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,7 @@ import CharacterItem from "@/components/CharacterItem.vue";
         </template>
 
         <template #name>Viktor Kraastav</template>
+        <template #species>Ankylosaurus</template>
       </CharacterItem>
 
       <CharacterItem class="sebin" href="/sebin/">
@@ -20,6 +21,7 @@ import CharacterItem from "@/components/CharacterItem.vue";
         </template>
 
         <template #name>Sebin Nyshkim</template>
+        <template #species>Anthro Dragon (main)</template>
       </CharacterItem>
 
       <CharacterItem class="jarek" href="/jarek/">
@@ -28,54 +30,23 @@ import CharacterItem from "@/components/CharacterItem.vue";
         </template>
 
         <template #name>Jarek Vakhtang</template>
+        <template #species>Krondir</template>
       </CharacterItem>
     </CharacterList>
   </main>
 </template>
 
 <style lang="scss">
-.sebin,
-.viktor,
-.jarek {
-  &:before,
-  &:after {
-    content: "";
-
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    transition: all 0.2s ease-in-out;
-
-    filter: saturate(0%);
-
-    z-index: -1;
-  }
-
-  &:hover {
-    &:before,
-    &:after {
-      filter: saturate(100%);
-    }
-  }
-}
-
 .sebin {
   font-family: "Exo", sans-serif;
+  font-style: italic;
 
   &:before {
-    background-image: radial-gradient(
-        circle at bottom right,
-        #800f0f 5%,
-        transparent 50%
-      ),
-      radial-gradient(circle at top left, #195673 5%, #170821 100%);
+    background: var(--background--sebin);
   }
 
   &:after {
-    background-image: url(@/assets/subtle-prism.svg);
+    background: url(@/assets/subtle-prism.svg);
     mix-blend-mode: multiply;
   }
 }
@@ -84,15 +55,30 @@ import CharacterItem from "@/components/CharacterItem.vue";
   font-family: "Secular One", serif;
 
   &:before {
-    background-color: #e7c7b1;
+    background: var(--background--viktor);
+  }
+
+  &:after {
+    top: unset;
+
+    background: var(--background-image--viktor) no-repeat center bottom;
+    background-size: cover;
+
+    height: var(--background-height-base--viktor);
+
+    z-index: 0;
+  }
+
+  &:hover:after {
+    height: var(--background-height-hover--viktor);
   }
 
   a {
-    color: #493428;
+    color: var(--color-text--viktor);
   }
 
   img {
-    background-color: #2d4c5a;
+    background: var(--image-background--viktor);
   }
 }
 
@@ -100,7 +86,7 @@ import CharacterItem from "@/components/CharacterItem.vue";
   font-family: "Rubik Dirt", sans-serif;
 
   &:before {
-    background-color: #6b682f;
+    background: var(--background--jarek);
   }
 }
 </style>
diff --git a/src/components/CharacterItem.vue b/src/components/CharacterItem.vue
index 12f025a..5a26983 100644
--- a/src/components/CharacterItem.vue
+++ b/src/components/CharacterItem.vue
@@ -9,13 +9,19 @@ defineProps<Props>();
 <template>
   <li class="character__item">
     <a class="character__link" :href="href">
-      <span class="character__image">
+      <div class="character__image">
         <slot name="image"></slot>
-      </span>
+      </div>
 
-      <span class="character__name">
-        <slot name="name"></slot>
-      </span>
+      <div class="character__meta">
+        <div class="character__name">
+          <slot name="name"></slot>
+        </div>
+
+        <div class="character__species">
+          <slot name="species"></slot>
+        </div>
+      </div>
     </a>
   </li>
 </template>
@@ -26,80 +32,107 @@ defineProps<Props>();
     flex: 1 1 auto;
 
     display: flex;
-    flex-flow: column nowrap;
+    flex-flow: var(--character-item-flex-flow);
     justify-content: center;
     align-items: center;
 
-    // transform: skew(25deg);
-    transition: all 0.2s ease-in-out;
+    transition: var(--character-item-transition);
 
     position: relative;
 
-    &:before {
-      position: absolute;
+    &:before,
+    &:after {
       content: "";
+
+      position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
+
+      filter: var(--base-saturation);
+
+      transition: var(--character-item-transition);
+
+      z-index: -1;
     }
 
     &:hover {
       flex: 2 1 auto;
-    }
-  }
 
-  &__item:hover &__link {
-    transform: scale(1.5);
-    filter: saturate(100%);
-  }
-
-  &__link {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: center;
-    align-items: center;
-
-    // transform: skew(-25deg);
-    filter: saturate(0%);
-  }
-
-  &__image {
-    flex: 0 0 auto;
-
-    img {
-      display: block;
-
-      width: 30vw;
-      height: 30vw;
-      max-width: 15vh;
-      max-height: 15vh;
-
-      margin: 0;
-      border: 0.25rem solid #fff;
-      border-radius: 100%;
-      padding: 0;
-
-      @media (min-width: 80em) {
-        width: 15vw;
-        height: 15vw;
-        max-width: 100%;
-        max-height: 100%;
+      &:before,
+      &:after {
+        filter: var(--hover-saturation);
       }
     }
   }
 
-  &__name {
-    flex: 0 0 auto;
+  &__link {
+    flex: var(--character-item-link-flex);
 
-    font-size: 1.75rem;
+    display: flex;
+    flex-flow: var(--character-item-link-flex-flow);
+    justify-content: var(--character-item-link-justify-content);
+    align-items: center;
 
-    margin: 1.75rem 0 0 0;
+    filter: var(--base-saturation);
 
-    @media (min-width: 80em) {
-      font-size: 2.5vw;
-      margin: 4vh 0 0 0;
+    transition: var(--character-item-transition);
+
+    z-index: 1;
+  }
+
+  &__item:hover &__link {
+    transform: scale(1.5);
+    filter: var(--hover-saturation);
+  }
+
+  &__image {
+    flex: var(--character-item-image-flex);
+
+    max-width: var(--character-item-image-max-size);
+    max-height: var(--character-item-image-max-size);
+
+    transition: all 0.5s ease-in-out 0.25s;
+
+    img {
+      display: block;
+
+      width: 100%;
+      height: auto;
+
+      margin: 0;
+      border: var(--character-item-image-border);
+      border-radius: 100%;
+      padding: 0;
     }
   }
+
+  &__meta {
+    flex: var(--character-item-meta-flex);
+
+    text-align: var(--character-item-meta-text-align);
+
+    max-height: var(--character-item-meta-max-height);
+    margin: var(--character-item-meta-margin);
+
+    opacity: var(--character-item-meta-opacity);
+
+    transition: all 0.5s ease-in-out 0.25s;
+  }
+
+  &__item:hover &__meta {
+    max-height: 12vh;
+    margin: var(--character-item-meta-margin-hover);
+    opacity: 1;
+  }
+
+  &__name {
+    font-size: var(--character-item-name-font-size);
+  }
+
+  &__species {
+    font-size: var(--character-item-species-font-size);
+  }
 }
 </style>
diff --git a/src/components/CharacterList.vue b/src/components/CharacterList.vue
index 646f4c2..bf079c8 100644
--- a/src/components/CharacterList.vue
+++ b/src/components/CharacterList.vue
@@ -10,7 +10,7 @@
 .character {
   &__list {
     display: flex;
-    flex-flow: column nowrap;
+    flex-flow: var(--character-list-flex-flow);
     justify-content: space-evenly;
 
     position: relative;
@@ -22,12 +22,6 @@
     height: 100vh;
 
     list-style: none;
-
-    overflow: hidden;
-
-    @media (min-width: 80em) {
-      flex-flow: row nowrap;
-    }
   }
 }
 </style>
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 71dc55a..fbcc4f2 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -1,74 +1,154 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
+  --theme-c-muted-blue: #22759d;
+  --theme-c-amaranth: #e93f3f;
+  --theme-c-deep-purple: #33124a;
 
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
+  --theme-c-muted-blue-darker: #195673;
+  --theme-c-amaranth-darker: #800f0f;
+  --theme-c-deep-purple-darker: #170821;
 
-  --vt-c-indigo: #2c3e50;
+  --theme-c-desert-sand: #e7c7b1;
+  --theme-c-woody-brown: #493428;
+  --theme-c-walnut-brown: #422322;
+  --theme-c-deep-oak: #341c1c;
+  --theme-c-crystal-blue: #6bb9db;
+  --theme-c-antique-white: #f8ebdd;
+  --theme-c-jagged-ice: #a7eef1;
+  --theme-c-glacier-blue: #6dabd1;
+  --theme-c-dark-grey-blue: #2d4c5a;
 
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+  --theme-c-muddy-green: #6b682f;
 
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+  --theme-b-background-sebin-light: radial-gradient(
+      circle at bottom right,
+      var(--theme-c-amaranth) 5%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%
+    );
+  --theme-b-background-sebin-dark: radial-gradient(
+      circle at bottom right,
+      var(--theme-c-amaranth-darker) 5%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at top left,
+      var(--theme-c-muted-blue-darker) 5%,
+      var(--theme-c-deep-purple-darker) 100%
+    );
+
+  --theme-b-background-viktor-light: url(@/assets/layered-waves-light.svg);
+  --theme-b-background-viktor-dark: url(@/assets/layered-waves-dark.svg);
+}
+
+/* general purpose variables */
+:root {
+  --character-list-flex-flow: column nowrap;
+
+  --character-item-flex-flow: column nowrap;
+  --character-item-transition: all 0.2s ease-in-out;
+
+  --character-item-link-flex-flow: column nowrap;
+  --character-item-link-justify-content: center;
+
+  --character-item-image-flex: 0 0 15vw;
+  --character-item-image-size: 30vw;
+  --character-item-image-max-size: 15vh;
+  --character-item-image-border: 0.75vh solid #fff;
+
+  --character-item-meta-text-align: center;
+  --character-item-meta-max-height: 100%;
+  --character-item-meta-margin: var(--character-item-meta-margin-hover);
+  --character-item-meta-margin-hover: 1.75rem 0 0 0;
+  --character-item-meta-opacity: 1;
+
+  --character-item-name-font-size: 1.75rem;
+  --character-item-species-font-size: 1.25rem;
+
+  --background-height-base--viktor: 80%;
+  --background-height-hover--viktor: 80%;
 }
 
 /* semantic color variables for this project */
 :root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
+  --background--sebin: var(--theme-b-background-sebin-light);
 
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
+  --background--viktor: var(--theme-c-desert-sand);
+  --background-image--viktor: var(--theme-b-background-viktor-light);
+  --color-text--viktor: var(--theme-c-woody-brown);
+  --image-background--viktor: var(--theme-c-dark-grey-blue);
 
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
+  --background--jarek: var(--theme-c-muddy-green);
 
-  --section-gap: 160px;
+  --base-saturation: saturate(100%);
+  --hover-saturation: saturate(100%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
+    --background--sebin: var(--theme-b-background-sebin-dark);
 
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
+    --background--viktor: var(--theme-c-dark-grey-blue);
+    --background-image--viktor: var(--theme-b-background-viktor-dark);
+    --color-text--viktor: var(--theme-c-antique-white);
+    --image-background--viktor: var(--theme-c-desert-sand);
   }
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
+@media (min-width: 30em) {
+  :root {
+    --character-item-flex-flow: row nowrap;
+
+    --character-item-link-flex: 0 0 27rem;
+    --character-item-link-flex-flow: row nowrap;
+    --character-item-link-justify-content: space-between;
+
+    --character-item-image-flex: 0 0 10rem;
+
+    --character-item-image-size: 15vh;
+    --character-item-image-max-size: 15vh;
+
+    --character-item-meta-flex: 0 0 15rem;
+    --character-item-meta-text-align: left;
+    --character-item-meta-margin-hover: 0;
+  }
 }
 
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+@media (min-width: 50em) and (orientation: landscape) {
+  :root {
+    --character-list-flex-flow: row nowrap;
+
+    --character-item-link-flex: 0 0 auto;
+    --character-item-link-flex-flow: column wrap;
+    --character-item-link-justify-content: center;
+
+    --character-item-image-flex: 0 0 15vw;
+    --character-item-image-size: 15vw;
+    --character-item-image-max-size: 15vw;
+    --character-item-image-border: 0.75vw solid #fff;
+
+    --character-item-meta-flex: 0 0 auto;
+    --character-item-meta-text-align: center;
+    --character-item-meta-margin-hover: 3vw 0 0 0;
+
+    --character-item-name-font-size: 2.5vw;
+    --character-item-species-font-size: 1.25vw;
+  }
+}
+
+@media (hover: hover) {
+  :root {
+    --character-item-meta-max-height: 0;
+    --character-item-meta-margin: 0;
+    --character-item-meta-opacity: 0;
+
+    --background-height-base--viktor: 50%;
+
+    --base-saturation: saturate(30%);
+    --hover-saturation: saturate(100%);
+  }
 }
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 35d08a3..92643c3 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,7 +1,34 @@
-@import "@/scss/base.scss";
-@import "@/assets/fonts/exo/exo.css";
-@import "@/assets/fonts/rubik-dirt/rubik-dirt.css";
-@import "@/assets/fonts/secular-one/secular-one.css";
+@import "@/scss/base";
+@import "@/assets/fonts/exo/exo";
+@import "@/assets/fonts/rubik-dirt/rubik-dirt";
+@import "@/assets/fonts/secular-one/secular-one";
+
+:root {
+  font-size: 16px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
 a {
   color: #fff;