diff --git a/components/LinksGrid.vue b/components/LinksGrid.vue
new file mode 100644
index 0000000..fb75c16
--- /dev/null
+++ b/components/LinksGrid.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import type { LinksGridProperty } from "~/utils/types/linksGrid";
+const property = defineProps<LinksGridProperty>();
+</script>
+
+<template>
+    <div class="links-grid">
+        <ul>
+            <li
+                v-for="entry in property.links"
+                :key="property.links.indexOf(entry)"
+            >
+                <LinkCard
+                    :title="entry.title"
+                    :description="entry.description"
+                    :link="entry.link"
+                    :image-path="entry.imagePath"
+                />
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style scoped>
+.links-grid {
+    container: links-grid / inline-size;
+    width: 100%;
+    min-width: 320px;
+}
+
+@property --links-grid-gap {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 30px;
+}
+
+ul {
+    list-style: none;
+    display: grid;
+    gap: var(--links-grid-gap);
+    grid-template-columns: repeat(2, 1fr);
+    padding-left: 0;
+    place-items: center;
+    & > li {
+        width: 100%;
+        min-width: 16rem;
+        height: 100%;
+    }
+}
+
+@container links-grid (width < 36rem) {
+    ul {
+        grid-template-columns: 1fr;
+    }
+    ul > li {
+        width: 100%;
+    }
+}
+</style>
diff --git a/composables/windowDimensions.ts b/composables/windowDimensions.ts
index a89dfdf..47be2b0 100644
--- a/composables/windowDimensions.ts
+++ b/composables/windowDimensions.ts
@@ -13,9 +13,13 @@ const mobileMaxWidth = 640;
  * @enum {number}
  */
 const enum ViewPortType {
+    // width > 1024
     DESKTOP,
+    // 1024 >= width > 960
     LARGE_TABLET,
+    // 960 >= width > 640
     MEDIUM_TABLET,
+    // 640 >= width
     MOBILE,
 }
 
diff --git a/docs/assets/navigation.js b/docs/assets/navigation.js
index 8ed278e..6125b81 100644
--- a/docs/assets/navigation.js
+++ b/docs/assets/navigation.js
@@ -1 +1 @@
-window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAA61XXU/bMBT9L3lG+0CDbbx1dGNIlHWA4AFNlZu4rVXHzhxHpZv473NMvuz448IQD0jNOeeec++1m97/TSR+kMlJggqSHCTphtBMYJac3HdP1lhOhCQpxQpQILlRn+U8qygu3yrWon/+ZiNzqkBbwrLk5NAtl+EVqqjstVYVSyXhbKTWIE3V4w+Pvx4PHOYuSCljBmvM65rUikCjZ4hSLPbnOVrj0mvVQL2SWVMTaPeG5P6J1w9fyZyW8nsaukp5XvASLanun6tcmQpO6VRNBbHUYX+gsDCxoDRVia89FfpcgRojfnAIO/Uh301Vf1hZK4fj2GhQoFuCd3Mu5A9BMJOoDtBXwazKIzUcfLPup0GeFnyzL/CLqtREv7xq7p23Y+7xjCo5NCI7WUlCfduIyj1Lp0iiJSody6ipCwMEGprBuOK78lSd7yVKt9+akH0pqTrmLhQVsay8+/zx/dHhILghcMtJ9t8uXCLPcnGFUeYaeTy/Io7m7ClyJ4h0nvtoFc2MXLsMCyTxNeYzLJFvZSwYaGm80nYAWzxYzPKvB+05DJngxZTvmC+U5i5aFCjTtAFPKFkzdV6lfas4lUcs/5XSQmc8G91YQe2aEJf9yqTY97qESSxWKPW1xKBZDTo6dujP1X8s5AtKtMxxFWNdn94rrBiusQ6RoNGeOaU99g31M38py/4G5ctKrLGYqYmG/RtQUIDvQwZ4EGYdp0Y4EyVse4pEFo7TokBJLhowOESnbjPD1hneOV5xhsI1AmRZD9/1mjFS65D+09q86p+zFY9G15oDQuiUXiosbL+1agePdzG+AC0K1M3LBgxegE7dZoatF+rnyQ0vws4bEMj4/AkL9t1qW7yYa7at/lTu35+megcEuu/wz0jQ13Dww0l+T1g2+cIfwjFaFCjDzwYMDtCp28yw9ZIS9YUrI/eHRi0k7A65rsGw89np9pzQwdcocEdM8VA79N8/BzihttMRAAA="
\ No newline at end of file
+window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAA61Y207bMBh+l1yjHdBgG3eFbh0SBQYILtBUuYnbWnXszHFUysS747g52bGdvwxxgdR8R/92mvTxXyTxk4xOIpSR6CCKV4QmArPo5LG5ssRyJCSJKVaADMmV+izlSUFx/lGxZu31DyuZUgVaE5ZEJ4duuQQvUEFlq7UoWCwJZz21CmmqHn95+fNy4Ah3QXI5FLDEvG9IrQgMOkGUYrE9T9ES596oBuqdwpqawLh3JPVPvLz4TuG0lD9TN1XM04znaE71+rns5iheLwUvWKLLXmWSpOQZlYb9Lh25WYAI6lnk+BTi3daHuoeVg1PMY8EpHas9iljsGGY3gomFdr71OLhrWh49frDMRn3IN2O1W1heKofr2GhQoXuCN9dcyCtBMJPW5DAr0gEPB9/0/dbpU4Pvthl+k0tJ9MurxX3wrph7PD0nh8bACS0kob6zifIti8dIojnKHZtRU2cGCDQ0g3HDN/mZutuVB+pnVbK1kmrF3EaDIlaUT9+/fj467BQ3BO45Sf47hUtkrxQ3GCWukQ/3V8TenD0mD4JI57kfdNHMgS8hhgWS+BbzKZbIt2UsGGjTeKXtArZ40MzKrwftOQyJ4NmYbxzfSjtfzZ3VKFCncQUeUbJk6rxK+67iVO6x/LeUGjrlSe+OFdQuCcOyP5gU21aXMInFAsW+JTFo1gIdHTv0r9V/LOQbLGpm38XYrrunLKuGa6xdJGi0E6e0J76hPvFbWfFXKJ0XYonFVE00nN+Aggr86jLAgzB9nBrhTpSw9RkSSbhOjQI1uajA4BKNus0cjp5PBAFk1zBweI3eK/1Ov8cN52d443hE60qXCFBqvXldj0k9tQbpv9tUL27nbMEHy2vNDiF0l7lUWNj51KoNfHgVhzdwjQKt5mUFBm+BRt1mhqNn6k3ljmfh5BUIFPx6hwXnrrUt3lBqti6eC/evCaZ6AwSmb/B7NGg9HPxwk78jloxO+VO4Ro0CdfhdgcEFGnWbGY6eU5J43xB2yhoCCn1bImEncyfaEkLnXaPAC9FRDi2B/nsFPG2JMJUTAAA="
\ No newline at end of file
diff --git a/docs/assets/search.js b/docs/assets/search.js
index 36bc72c..28956d5 100644
--- a/docs/assets/search.js
+++ b/docs/assets/search.js
@@ -1 +1 @@
-window.searchData = "data:application/octet-stream;base64,H4sIAAAAAAAAA8Wd23LbOBKG30W+dTkCSAJk7jxxdia1OW3inblIpVyKxCSsyKJHhzjZVN59CR672Q2qKcmZm/HYYv/8AXzdACGS+TFZ5/ebyeN3PyZfstVi8lifT1az23TyeLLbZsvNo9nm+2p+NdvOPsw26eR8slsvi89u88VumW4elcfcoGMuPm9vl8WB8+Vss0kL6cnk53mjbsJWHgW9SWeLVvzjbjXfZvmKlydxzAnPJ3ezdbraelqx389f62ybHmKoDDzGkZ4mVkXa003FWD2ZLZcfZvMv/6pNtS633+88I7JX46gujKLAtHZvbpyNk3k6a/XE1vYrS3v7zzxbHNvbnMY/3dteT0f3NttjoLd7teVTukrXs236Ns1fpNuZp7r0jpLWF594P5n78vtPR3qkfyp/i6sRWqzzu6v8fuVpcHnQTXPQYHvjVv+qPvxFvuiASFe7W48qPF7Sxp7zzoLqcMwLtd0m/SP/mq4P8nDWU5AbQlo+d0+W2fzLocaa4OM90UG7XGafVrdOaYS5NuhUw/c8/XiEgbM6/ID+6ZrP+nqTffp8jLEm/kTOdGTIAL4ufqbr7ffWZbbapuuPs7kvqfuBx43hVHd1bzn7kC6P83HWaBzQY21PeOzdwvp0mLta4gHMFRLrrJA8zl+n8gAWZ6RUHGYS6pzGJpcXT4uuGJ8UZdTpMmKbfhvfW52Hszr+gF6qmu9L1Gz15RhbdfwJbPGrlE/FQi5df8dDyK1U4IGDqxVIyO+cuqcX0Al+Hz6bpw9QYzwDki2OM3JWCozzglS8xm5nn9LXs+3nY/0BnQewOZ/doUukw0x2KqexyMP9eXb7Ybf+lK5fFOuJQbrRkWK8/4BR0tUBPhUrIScet/C4CU9qbNTUJxDdO4yuBj6ZrReDI9gcJB6853WAdNzaE/QD5aPVNsQ3h2Xb5d5107CPs0ZD7oYI+ewt0s18nYnSf49JrPQAViXT7h6P4pl3tDlxpd/jcFyll9jk82+V3m8Gc88dIM67y/U2my/TZ6uP+b72l7rgeHmmlZZ9GM+2e5OMPfNZHSk7PQz3T6brxZO8sLB/pc87wgKnMzarDjnMVBd8OkOOXknK8I5A9AkHz+1fPZPmsmf8+hpH2YNp9rI4TLTuLvXao39xiuHzjkywrokDC5/v13DzfIQXGHwqQ2PzvWfpoGzfa2pUavUcjU+s/X00Pq363XRgUnHWum3cpwQmuklZyrQHHp5LZLYcd86zy7EVuGsc6+L6Pk2HNmc5D03MEQ78y5G9lwPNQeJlycs6QHo50J6gHzhu1IcuB1ZjSrjfyxnUkbsiYt7l7KY48kiLjcZp7PHc3BUF4Tq/G8SmPkZMzevqeCk0jXwvTI5M04YjNkGHPMh3QT0qR1/yDLobd8Gz36KPk9WX3f92z7PNdg8r7XEjeGlj5Mx0p2HCx7DTtcs39+7WLtD12Ev3lxNYO6Oao6xywnuH8O/L1eLyt/zb4Pg1B4kH7z91gHTk2hP0A+Vj1jbEM2B/79KNZD9m2MoZkJF7Ilp7h2WzzBbpxXZ4M6E86GYr31B46wJE82Qr3YXIh6I1f2yJ87kYWd4aP0DmqH1Fry35juIIS3PZVZDX1HzEZdAIW5J9Q68n8Y7hsCHCtrTeYGPji80+woXfIwzYGPXVAe6lvZvTu/VMUgmH3AGNU9u7zxZjKwP21gic2tjnFN14c4CzVuEE1sBNmnfZo0/ptn/928wYxcc33cfS2wUX6cfZbtm1trtNsKdXHzicOz2LA62ov7Us9yTo7FefGx10shZh1THtwqb3jxG7YMb9unetfMBYlZoHjFdvHUxadZ3derFzn52sHaXYmAaUzjjn8/z2Lt/MPjinm/k6Xy6vikbOVnPaEHDoDT5U2q7dJn3Ln6Nr4cBZSPhw0weatq8n7ovP8vurotNWG+dqsC/6B4/ojb985+H7g5yJkZD3CWmk8G7yI72dcR/sucF8yDZ7Iq5vRdPswzXuYng6PkUTm26UzdsP2NQ98/svaOvXLL1/na+317+G3Ive+f7xdr8q1syrLV7e/oLm49P+yl7ovnX5kxv66guIwXbDuJNUUfBtyNXTt/++fvX6KDtnncgBHYt6hb/N//LN709vri9/e/70+jijPaUHcfvi6dWz/744id2+1MP4ffXbs+dPjzTaaJzOIU0brnKMcAvCT51Ezy9fXr19cvn6oF7s+zqDakf0J+wu1vXrV2+u31w+O4hRYhqIncrz+/PiCn6Rfps8/jH5mq7dkYWOvggukkL4Y5YuF+454Ko55+4E9dMBi3y+K//3fX3Yn+l8m6/dwdXRj6aT83fT81BfhHH0/v35uya4/KD8Q6PR/aUMVMVvigtUJFChQF38prlATQI1CgyK3wIuMCCBAQoMi9/C8yC8mCqNAkMSGKLAqPgt4s4YkcAIBRrfGQ0JNCjQFr8Z7oyWBFoUGBe/WS4wJoExCiwIehdzgQkJTDAAjoeEJYCyo3rwlPSw3CmGHwyQclgonj3KkMIQKYeGYvlTlCOFQVIOD8UyqChLCsOkHCIqZIMpTwoDpRwmimVRUaYUhko5VBSLlaJcKQyWcrgoFi1F2VIYLuWQUTGXCYrypTBg2jGjWMI0JUxjwrRjRrOEaUqY7pWoskap88BeBNbiYKZKYcK0Y0Zrrs2aEqYxYdoxo1nCNCVMY8K0Y0azhGlKmMaEaceMZgnTlDCNCdOOGW3OA3URJgkOpoRpTJh2zGiWME0J05gw7ZjRbAHTlDCNCQscM5olLKCEBZiwQHnZDihhASYscMwELJ4BJSzoTYTlTMgWwICZCzFhgWMm0BzbASUswIQFjpmAn4QpYQEmLDDexAgoYQEmLPATFlDCAkxY4JgJ2MQIKGEBJixwzARsYgSUsAATFjpmAsP1dkgJCzFhoWMmsGwwJSzEhIUlYTEbTAkLMWFhSVjCBlPCwt5yq1xvTdlgZsWFCQsdMyFbekNKWIgJC42/tylhISYsdMyEbGKElLAQExbG/qGihIWYsDDx9zYlLMSERVNvb0eUsAgTFilvmyNKWIQJi/yERZSwCBMWOWZCtpJElLAIExaVhLH5HFHCot6iviSMX9Yz63pMWGS8eEaUsAgTFpWEseuwiBIWYcIix0zIzpIRJSzChEWOmZCdJSNKWIQJM1PvashQwgwmzChv3TaUMIMJM46ZkJ2fDSXMYMKMYyZip1hDCTOYMOOYidgp1lDCDCbMlNeN7DWGoYSZ3qWjYyZiE8MwV4+YMOOYidjEMJQwgwkzjpmITQxDCTOYMOOYiVi2DSXMYMLs1AuJpYRZTJhV3gWNpYRZTJh1zERsVllKmMWEWf9K31LCLCbMloSxKWkpYRYTZstrSXbtaSlhFhNmS8LYrLKUMNvboCh3KNjpxjJ7FJgw65gxbCWxlDCLCbOOGcNmlaWEWUxY7JgxAUdYTAmLMWGxY8awWRVTwmJMWKz9Z6aExZiw2DFj2JSMKWExJiwO/WemhMWYsNgxY9h8jilhMSYsNv4zU8JiTFhcEsbvZVHC4t42WEkYm1UxsxOGCYtLwtjEiClhMSYsccxYdrpJKGEJJiwp12FcOicUsAQDlmhvRiYUsAQDlgTejEwoYAkGLHHIWD6YApZgwBKHjGXLdkIBSzBgifGfmQKWYMASh4xlZ9iEApZgwJJyo5WtBQkFLOnttTpkLJvOCbPd2t9vLQnjt/Gm3JZrb891qrw9Xn3Wj+9tu04dOpbfCZwyG6/T3s7r1NFj2dysPuvHV38rv/z4mq636eJZ9SXIu3ft/S4/Jjf1NyPt9+s/JmHxn5/nE1P9KNKl+Pmz+1qk/Gv7zYj7zJ0XvFSpE1VJp6qnMp3qbq72aelOzOhOrJiexosty1vxgGDUCRa1f4Rg/fKVrL5zEUiCboyFHVdJbssb64CSAUqRTIn2WRCDYdVVXKTHqGXlGwmAIui0QDgK7j2Zi/o9mevydbcAkU5O2F9ILb/fzOu3bn5s31MK3AKz49W/5tliSB10hXCEoPp99aLdTg7wLRui9n1BQMMCkViosl60Dw6ArgNKoapiQ6EiuS1x0d4NCQgHJyiWIWOFq69+F+DGQiAN6k4sg5TpgQgYtMIRcQ9Zl2XhrnxiBdTXKejOusJGspJYPyvmntyrvqEGFkH6mFCkVr1NAIwzKDThtB5nI5NqbuIFPQ8yLq7V4rrwxHWzY6k6eB0O8AtzWpZ2hdKXrXvGtVOxQCWRwefeJVcQt+JnOpC8SlZqGr20ekgL5DBARcuKYqNVvR+ykwJ5oGSwNUp37eM1oJGg4CnhILYPjwBogSsrk0mbJ2SAGTC1qaSKC+o6ZWVclD1PFkJgJENbJ6psFOplAR1QsCrQMmvNe5U3aX5bvsIZoAsyTKTVvm2s+OuOG1cNBiSQYdLc/goyH5QiG1dhiSwTMrQi0IAyLcODrbgaFDZdD2RQ/zQNKLLWZpuVexAfQAK0I1n5qF8sCwAGGkqqsVoU6x0MrLUwyWXz1HJW8HCzdTMpGkQLSE1kdC3Ldx+DZoHKqmRTUvWIIBg5uBIK6pGrL0esDCkn6RY2HO4BIDWQy/X5CkDWhLXLULbYuE0X2e6W63/AfiLUyj9keNFvIVhTGeH9iUNBqGQguHdQ+Lo8hEtlWQV0cqSShmDowqguzrIaka/m1WvMQSPhxYcscfJiit1t0s/VW9qBFJizlWy2cOu5YlXCdheY2yIZBvXLAdw1LqcYAX9Gxvxdvt6uZxnmE066U5nO30XRmn3Iv7G2QLEwsnHsnsoHMqBsGVkpXffnLwU0lAzR8sFNwmgE0s/IBq8UYvsH9LeVFdPqZSWgmALIdb0SN7KiUD/jDkoeKMxBvZq3Mtq31YuPAONg6CMZSUXiDVxOgq6KZRWr0Bu6irQgZxJZj1WP9aLLfKgIBMfoDSwGAWsy7vtvx16U/xhHJwh6UcYu81JiugAGY61lGLOvy70t31gMdIFbPd5us0hAiIMxCmRzAn0rKJADVSUQUtmT6zsMgWQ0vjPraQcpgsk+Gm8STD1IFayPzPiebKYNVA5B/TGyGs2/aQVIgpWJkbXdPQnmJsccPkYCygYwmdRrFPdlwBjp/kWpBUU8qQtvIpsv62cyQckAhNv6eigRjM/788lddpcWSVOEvnv/8+f/Aa4J1E5BbQAA";
\ No newline at end of file
+window.searchData = "data:application/octet-stream;base64,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";
\ No newline at end of file
diff --git a/docs/enums/composables_windowDimensions.ViewPortOrientation.html b/docs/enums/composables_windowDimensions.ViewPortOrientation.html
index bd88323..c953b24 100644
--- a/docs/enums/composables_windowDimensions.ViewPortOrientation.html
+++ b/docs/enums/composables_windowDimensions.ViewPortOrientation.html
@@ -1,4 +1,4 @@
 <!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ViewPortOrientation | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="../modules/composables_windowDimensions.html">composables/windowDimensions</a></li><li><a href="composables_windowDimensions.ViewPortOrientation.html">ViewPortOrientation</a></li></ul><h1>Enumeration ViewPortOrientation<code class="tsd-tag">Const</code> <code class="tsd-tag">Readonly</code></h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Enums for viewport orientation</p>
-</div><div class="tsd-comment tsd-typography"></div></section><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:27</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Enumeration Members</h3><div class="tsd-index-list"><a href="composables_windowDimensions.ViewPortOrientation.html#LANDSCAPE" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>LANDSCAPE</span></a>
+</div><div class="tsd-comment tsd-typography"></div></section><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:31</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Enumeration Members</h3><div class="tsd-index-list"><a href="composables_windowDimensions.ViewPortOrientation.html#LANDSCAPE" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>LANDSCAPE</span></a>
 <a href="composables_windowDimensions.ViewPortOrientation.html#PORTRAIT" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>PORTRAIT</span></a>
-</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Enumeration Members"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Enumeration Members</h2></summary><section><section class="tsd-panel tsd-member"><a id="LANDSCAPE" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>LANDSCAPE</span><a href="#LANDSCAPE" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">LANDSCAPE</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:28</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="PORTRAIT" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>PORTRAIT</span><a href="#PORTRAIT" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">PORTRAIT</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:29</li></ul></aside></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="tsd-otp-Enumeration Members"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Enumeration Members</summary><div><a href="#LANDSCAPE" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>LANDSCAPE</span></a><a href="#PORTRAIT" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>PORTRAIT</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Enumeration Members"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Enumeration Members</h2></summary><section><section class="tsd-panel tsd-member"><a id="LANDSCAPE" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>LANDSCAPE</span><a href="#LANDSCAPE" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">LANDSCAPE</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:32</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="PORTRAIT" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>PORTRAIT</span><a href="#PORTRAIT" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">PORTRAIT</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:33</li></ul></aside></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="tsd-otp-Enumeration Members"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Enumeration Members</summary><div><a href="#LANDSCAPE" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>LANDSCAPE</span></a><a href="#PORTRAIT" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>PORTRAIT</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/docs/enums/composables_windowDimensions.ViewPortType.html b/docs/enums/composables_windowDimensions.ViewPortType.html
index de1437e..7bd0073 100644
--- a/docs/enums/composables_windowDimensions.ViewPortType.html
+++ b/docs/enums/composables_windowDimensions.ViewPortType.html
@@ -3,4 +3,4 @@
 <a href="composables_windowDimensions.ViewPortType.html#LARGE_TABLET" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>LARGE_<wbr/>TABLET</span></a>
 <a href="composables_windowDimensions.ViewPortType.html#MEDIUM_TABLET" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>MEDIUM_<wbr/>TABLET</span></a>
 <a href="composables_windowDimensions.ViewPortType.html#MOBILE" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>MOBILE</span></a>
-</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Enumeration Members"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Enumeration Members</h2></summary><section><section class="tsd-panel tsd-member"><a id="DESKTOP" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>DESKTOP</span><a href="#DESKTOP" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">DESKTOP</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:16</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="LARGE_TABLET" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>LARGE_<wbr/>TABLET</span><a href="#LARGE_TABLET" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">LARGE_<wbr/>TABLET</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:17</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="MEDIUM_TABLET" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>MEDIUM_<wbr/>TABLET</span><a href="#MEDIUM_TABLET" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">MEDIUM_<wbr/>TABLET</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:18</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="MOBILE" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>MOBILE</span><a href="#MOBILE" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">MOBILE</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:19</li></ul></aside></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="tsd-otp-Enumeration Members"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Enumeration Members</summary><div><a href="#DESKTOP" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>DESKTOP</span></a><a href="#LARGE_TABLET" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>LARGE_<wbr/>TABLET</span></a><a href="#MEDIUM_TABLET" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>MEDIUM_<wbr/>TABLET</span></a><a href="#MOBILE" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>MOBILE</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Enumeration Members"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Enumeration Members</h2></summary><section><section class="tsd-panel tsd-member"><a id="DESKTOP" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>DESKTOP</span><a href="#DESKTOP" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">DESKTOP</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:17</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="LARGE_TABLET" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>LARGE_<wbr/>TABLET</span><a href="#LARGE_TABLET" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">LARGE_<wbr/>TABLET</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:19</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="MEDIUM_TABLET" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>MEDIUM_<wbr/>TABLET</span><a href="#MEDIUM_TABLET" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">MEDIUM_<wbr/>TABLET</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:21</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="MOBILE" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>MOBILE</span><a href="#MOBILE" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-enum-member">MOBILE</span></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:23</li></ul></aside></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="tsd-otp-Enumeration Members"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Enumeration Members</summary><div><a href="#DESKTOP" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>DESKTOP</span></a><a href="#LARGE_TABLET" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>LARGE_<wbr/>TABLET</span></a><a href="#MEDIUM_TABLET" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>MEDIUM_<wbr/>TABLET</span></a><a href="#MOBILE" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>MOBILE</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/docs/functions/composables_backgroundImageOptimization.useBackgroundImageOptimization.html b/docs/functions/composables_backgroundImageOptimization.useBackgroundImageOptimization.html
new file mode 100644
index 0000000..f8f68f0
--- /dev/null
+++ b/docs/functions/composables_backgroundImageOptimization.useBackgroundImageOptimization.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>useBackgroundImageOptimization | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="../modules/composables_backgroundImageOptimization.html">composables/backgroundImageOptimization</a></li><li><a href="composables_backgroundImageOptimization.useBackgroundImageOptimization.html">useBackgroundImageOptimization</a></li></ul><h1>Function useBackgroundImageOptimization</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="useBackgroundImageOptimization" class="tsd-anchor"></a><span class="tsd-kind-call-signature">use<wbr/>Background<wbr/>Image<wbr/>Optimization</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span><br/><span>    </span><span class="tsd-kind-property">backgroundImageStyles</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">WritableComputedRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-symbol">{ </span><br/><span>        </span><span class="tsd-kind-property">backgroundImage</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span><a href="#useBackgroundImageOptimization" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Vue Composable for optimizing background-image with Nuxt Image</p>
+</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">{ </span><br/><span>    </span><span class="tsd-kind-property">backgroundImageStyles</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">WritableComputedRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-symbol">{ </span><br/><span>        </span><span class="tsd-kind-property">backgroundImage</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></h4><p>writable computed value that will return the Vue style object with optimized image URL</p>
+<ul class="tsd-parameters"><li class="tsd-parameter"><h5><span class="tsd-kind-property">background<wbr/>Image<wbr/>Styles</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">WritableComputedRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-symbol">{ </span><br/><span>    </span><span class="tsd-kind-property">backgroundImage</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in composables/backgroundImageOptimization.ts:10</li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/docs/functions/composables_windowDimensions.useWindowDimensions.html b/docs/functions/composables_windowDimensions.useWindowDimensions.html
index 7bec533..671e75b 100644
--- a/docs/functions/composables_windowDimensions.useWindowDimensions.html
+++ b/docs/functions/composables_windowDimensions.useWindowDimensions.html
@@ -1,3 +1,3 @@
 <!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>useWindowDimensions | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="../modules/composables_windowDimensions.html">composables/windowDimensions</a></li><li><a href="composables_windowDimensions.useWindowDimensions.html">useWindowDimensions</a></li></ul><h1>Function useWindowDimensions</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="useWindowDimensions" class="tsd-anchor"></a><span class="tsd-kind-call-signature">use<wbr/>Window<wbr/>Dimensions</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span><br/><span>    </span><span class="tsd-kind-property">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-kind-property">viewPortOrientation</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortOrientation.html" class="tsd-signature-type tsd-kind-enum">ViewPortOrientation</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortOrientation.html" class="tsd-signature-type tsd-kind-enum">ViewPortOrientation</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-kind-property">viewPortType</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-kind-property">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span><a href="#useWindowDimensions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Vue Composable for getting window dimensions and viewport type based on width</p>
 </div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">{ </span><br/><span>    </span><span class="tsd-kind-property">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-kind-property">viewPortOrientation</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortOrientation.html" class="tsd-signature-type tsd-kind-enum">ViewPortOrientation</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortOrientation.html" class="tsd-signature-type tsd-kind-enum">ViewPortOrientation</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-kind-property">viewPortType</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-kind-property">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></h4><p>returns the references of width, height, and viewport type</p>
-<ul class="tsd-parameters"><li class="tsd-parameter"><h5><span class="tsd-kind-property">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">view<wbr/>Port<wbr/>Orientation</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortOrientation.html" class="tsd-signature-type tsd-kind-enum">ViewPortOrientation</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortOrientation.html" class="tsd-signature-type tsd-kind-enum">ViewPortOrientation</a><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">view<wbr/>Port<wbr/>Type</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:36</li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+<ul class="tsd-parameters"><li class="tsd-parameter"><h5><span class="tsd-kind-property">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">view<wbr/>Port<wbr/>Orientation</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortOrientation.html" class="tsd-signature-type tsd-kind-enum">ViewPortOrientation</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortOrientation.html" class="tsd-signature-type tsd-kind-enum">ViewPortOrientation</a><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">view<wbr/>Port<wbr/>Type</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:40</li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/docs/functions/utils_asyncDatabase.asyncDatabaseWrite.html b/docs/functions/utils_asyncDatabase.asyncDatabaseWrite.html
index 617c4c5..6dd25de 100644
--- a/docs/functions/utils_asyncDatabase.asyncDatabaseWrite.html
+++ b/docs/functions/utils_asyncDatabase.asyncDatabaseWrite.html
@@ -6,4 +6,4 @@
 </div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">sqlQuery</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>SQL query to execute</p>
 </div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">callback</span>: <a href="../types/utils_asyncDatabase.asyncDatabaseVoidCallbackFunction.html" class="tsd-signature-type tsd-kind-type-alias">asyncDatabaseVoidCallbackFunction</a></span><div class="tsd-comment tsd-typography"><p>callback to perform after the operation</p>
 </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="utils_asyncDatabase.asyncDatabaseWrite.html#asyncDatabaseWrite.Type">Type</a><span class="tsd-signature-symbol">&gt;</span></h4><p>Promise for database operation</p>
-<div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in utils/asyncDatabase.ts:54</li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+<div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in utils/asyncDatabase.ts:56</li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/docs/index.html b/docs/index.html
index 7f0291b..23187a2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,14 +2,15 @@
 <a id="md:使用言語、ライブラリー、フレームワーク、ツール" class="tsd-anchor"></a><h2 class="tsd-anchor-link">使用言語、ライブラリー、フレームワーク、ツール<a href="#md:使用言語、ライブラリー、フレームワーク、ツール" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
 <li>JavaScript、TypeScript、Vue</li>
 <li>Nuxt</li>
-<li>node npm</li>
+<li>node, npm</li>
 <li>sqlite</li>
+<li>typedoc, eslint, prettier</li>
 </ul>
 <a id="md:コンテンツの管理" class="tsd-anchor"></a><h2 class="tsd-anchor-link">コンテンツの管理<a href="#md:コンテンツの管理" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>ニュース等のコンテンツの管理は<code>src-manager/</code>内の<code>README.md</code>を参照すること</p>
 <a id="md:開発を開始する" class="tsd-anchor"></a><h2 class="tsd-anchor-link">開発を開始する<a href="#md:開発を開始する" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><blockquote>
 <p>初めてこのプロジェクトに参加する際には<code>CONTRIBUTING.md</code>を<em><strong>必ず</strong></em>読んでおくこと</p>
 </blockquote>
-<pre><code class="bash"><span class="hl-0">git</span><span class="hl-1"> </span><span class="hl-2">clone</span><span class="hl-1"> </span><span class="hl-2">https://git.kenryu.us/kenryuS/sera-new-hp.git</span><span class="hl-1"> </span><span class="hl-3"># レポジトリをクローン</span><br/><span class="hl-0">cd</span><span class="hl-1"> </span><span class="hl-2">sera-new-hp</span><span class="hl-1"> </span><span class="hl-3"># 移動して</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-3"># 依存パッケージのインストール</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev</span><span class="hl-1"> </span><span class="hl-3"># デベロッパーモードでサーバーを起動</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">generate</span><span class="hl-1"> </span><span class="hl-3"># 静的サイトを生成</span>
+<pre><code class="bash"><span class="hl-0">git</span><span class="hl-1"> </span><span class="hl-2">clone</span><span class="hl-1"> </span><span class="hl-2">https://git.kenryu.us/kenryuS/sera-new-hp.git</span><span class="hl-1"> </span><span class="hl-3"># レポジトリをクローン</span><br/><span class="hl-0">cd</span><span class="hl-1"> </span><span class="hl-2">sera-new-hp</span><span class="hl-1"> </span><span class="hl-3"># 移動して</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-3"># 依存パッケージのインストール</span><br/><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">dev</span><span class="hl-1"> </span><span class="hl-3"># デベロッパーモードでサーバーを起動</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">generate</span><span class="hl-1"> </span><span class="hl-3"># 静的サイトを生成</span><br/><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">lint</span><span class="hl-1"> </span><span class="hl-3"># 静的解析ツール eslint を実行</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">format</span><span class="hl-1"> </span><span class="hl-3"># prettier を使用してソースコードを整形</span><br/><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">run</span><span class="hl-1"> </span><span class="hl-2">documentation</span><span class="hl-1"> </span><span class="hl-3"># typedoc でドキュメンテーションを生成</span>
 </code><button type="button">Copy</button></pre>
 
 <a id="md:便利・重要なファイルフォルダ" class="tsd-anchor"></a><h2 class="tsd-anchor-link">便利・重要なファイル/フォルダ<a href="#md:便利・重要なファイルフォルダ" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
diff --git a/docs/interfaces/utils_types_linksGrid.LinksGridProperty.html b/docs/interfaces/utils_types_linksGrid.LinksGridProperty.html
new file mode 100644
index 0000000..af4308b
--- /dev/null
+++ b/docs/interfaces/utils_types_linksGrid.LinksGridProperty.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>LinksGridProperty | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="../modules/utils_types_linksGrid.html">utils/types/linksGrid</a></li><li><a href="utils_types_linksGrid.LinksGridProperty.html">LinksGridProperty</a></li></ul><h1>Interface LinksGridProperty</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Interface that defines property for LinksGrid component</p>
+</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-Example"><h4 class="tsd-anchor-link"><a id="Example" class="tsd-anchor"></a>Example<a href="#Example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-8">linksList</span><span class="hl-1"> = [</span><br/><span class="hl-1">    {</span><br/><span class="hl-1">        </span><span class="hl-6">title:</span><span class="hl-1"> </span><span class="hl-2">&quot;test 1&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-6">description:</span><span class="hl-1"> </span><span class="hl-2">&quot;Test Page #1&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-6">link:</span><span class="hl-1"> </span><span class="hl-2">&quot;/test/1&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-6">imagePath:</span><span class="hl-1"> </span><span class="hl-2">&quot;/images/test-1.png&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    },</span><br/><span class="hl-1">    ...</span><br/><span class="hl-1">    {</span><br/><span class="hl-1">        </span><span class="hl-6">title:</span><span class="hl-1"> </span><span class="hl-2">&quot;test n&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-6">description:</span><span class="hl-1"> </span><span class="hl-2">&quot;Test Page #n&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-6">link:</span><span class="hl-1"> </span><span class="hl-2">&quot;/test/n&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">        </span><span class="hl-6">imagePath:</span><span class="hl-1"> </span><span class="hl-2">&quot;/images/test-n.png&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    },</span><br/><span class="hl-1">];</span><br/><span class="hl-1">&lt;</span><span class="hl-9">LinksGrid</span><span class="hl-1"> :</span><span class="hl-6">links</span><span class="hl-1">=</span><span class="hl-2">&quot;linksList&quot;</span><span class="hl-1"> /&gt;</span>
+</code><button type="button">Copy</button></pre>
+
+</div></div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface </span><span class="tsd-kind-interface">LinksGridProperty</span> <span class="tsd-signature-symbol">{ </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_linksGrid.LinksGridProperty.html#links">links</a><span class="tsd-signature-symbol">: </span><a href="utils_types_linkCard.LinkCardProperty.html" class="tsd-signature-type tsd-kind-interface">LinkCardProperty</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div><aside class="tsd-sources"><ul><li>Defined in utils/types/linksGrid.ts:29</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="utils_types_linksGrid.LinksGridProperty.html#links" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>links</span></a>
+</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Properties</h2></summary><section><section class="tsd-panel tsd-member"><a id="links" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>links</span><a href="#links" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">links</span><span class="tsd-signature-symbol">:</span> <a href="utils_types_linkCard.LinkCardProperty.html" class="tsd-signature-type tsd-kind-interface">LinkCardProperty</a><span class="tsd-signature-symbol">[]</span></div><div class="tsd-comment tsd-typography"><p>Array of property of LinkCard components</p>
+</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in utils/types/linksGrid.ts:30</li></ul></aside></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="tsd-otp-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Properties</summary><div><a href="#links" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>links</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/docs/interfaces/utils_types_slide_ts.SlideEntry.html b/docs/interfaces/utils_types_slide.SlideEntry.html
similarity index 79%
rename from docs/interfaces/utils_types_slide_ts.SlideEntry.html
rename to docs/interfaces/utils_types_slide.SlideEntry.html
index 16a2d13..ecefbde 100644
--- a/docs/interfaces/utils_types_slide_ts.SlideEntry.html
+++ b/docs/interfaces/utils_types_slide.SlideEntry.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>SlideEntry | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="../modules/utils_types_slide_ts.html">utils/types/slide.ts</a></li><li><a href="utils_types_slide_ts.SlideEntry.html">SlideEntry</a></li></ul><h1>Interface SlideEntry</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Entries to show in the slide show</p>
+<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>SlideEntry | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="../modules/utils_types_slide.html">utils/types/slide</a></li><li><a href="utils_types_slide.SlideEntry.html">SlideEntry</a></li></ul><h1>Interface SlideEntry</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Entries to show in the slide show</p>
 </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-Example"><h4 class="tsd-anchor-link"><a id="Example" class="tsd-anchor"></a>Example<a href="#Example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="ts"><span class="hl-4">let</span><span class="hl-1"> </span><span class="hl-6">entry</span><span class="hl-1">: </span><span class="hl-5">SlideEntry</span><span class="hl-1"> = {</span><br/><span class="hl-1">    </span><span class="hl-6">imagePath:</span><span class="hl-1"> </span><span class="hl-2">&quot;/images/slide/1.jpg&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">title:</span><span class="hl-1"> </span><span class="hl-2">&quot;First Slide&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">content:</span><span class="hl-1"> </span><span class="hl-2">&quot;This is first slide&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">    </span><span class="hl-6">link:</span><span class="hl-1"> </span><span class="hl-2">&quot;/to-some-page&quot;</span><span class="hl-1">,</span><br/><span class="hl-1">};</span>
 </code><button type="button">Copy</button></pre>
 
-</div></div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface </span><span class="tsd-kind-interface">SlideEntry</span> <span class="tsd-signature-symbol">{ </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide_ts.SlideEntry.html#content">content</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide_ts.SlideEntry.html#imagePath">imagePath</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide_ts.SlideEntry.html#link">link</a><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide_ts.SlideEntry.html#title">title</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:20</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="utils_types_slide_ts.SlideEntry.html#content" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>content</span></a>
-<a href="utils_types_slide_ts.SlideEntry.html#imagePath" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>image<wbr/>Path</span></a>
-<a href="utils_types_slide_ts.SlideEntry.html#link" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>link?</span></a>
-<a href="utils_types_slide_ts.SlideEntry.html#title" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>title</span></a>
+</div></div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface </span><span class="tsd-kind-interface">SlideEntry</span> <span class="tsd-signature-symbol">{ </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide.SlideEntry.html#content">content</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide.SlideEntry.html#imagePath">imagePath</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide.SlideEntry.html#link">link</a><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide.SlideEntry.html#title">title</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:20</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="utils_types_slide.SlideEntry.html#content" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>content</span></a>
+<a href="utils_types_slide.SlideEntry.html#imagePath" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>image<wbr/>Path</span></a>
+<a href="utils_types_slide.SlideEntry.html#link" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>link?</span></a>
+<a href="utils_types_slide.SlideEntry.html#title" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>title</span></a>
 </div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Properties</h2></summary><section><section class="tsd-panel tsd-member"><a id="content" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>content</span><a href="#content" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">content</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>text to show in the p element</p>
 </div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:23</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="imagePath" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>image<wbr/>Path</span><a href="#imagePath" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">image<wbr/>Path</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>path to the image</p>
 </div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:21</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="link" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag">Optional</code><span>link</span><a href="#link" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">link</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>optional link to a page</p>
diff --git a/docs/interfaces/utils_types_slide_ts.SlideProperty.html b/docs/interfaces/utils_types_slide.SlideProperty.html
similarity index 76%
rename from docs/interfaces/utils_types_slide_ts.SlideProperty.html
rename to docs/interfaces/utils_types_slide.SlideProperty.html
index 7540927..a53aef8 100644
--- a/docs/interfaces/utils_types_slide_ts.SlideProperty.html
+++ b/docs/interfaces/utils_types_slide.SlideProperty.html
@@ -1,13 +1,13 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>SlideProperty | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="../modules/utils_types_slide_ts.html">utils/types/slide.ts</a></li><li><a href="utils_types_slide_ts.SlideProperty.html">SlideProperty</a></li></ul><h1>Interface SlideProperty</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Interface for Slide component</p>
+<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>SlideProperty | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="../modules/utils_types_slide.html">utils/types/slide</a></li><li><a href="utils_types_slide.SlideProperty.html">SlideProperty</a></li></ul><h1>Interface SlideProperty</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Interface for Slide component</p>
 </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-Example"><h4 class="tsd-anchor-link"><a id="Example" class="tsd-anchor"></a>Example<a href="#Example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="ts"><span class="hl-1">&lt;</span><span class="hl-9">Slide</span><span class="hl-1"> :</span><span class="hl-6">entries</span><span class="hl-1">=</span><span class="hl-2">&quot;slideEntries&quot;</span><span class="hl-1"> </span><span class="hl-6">duration</span><span class="hl-1">=</span><span class="hl-2">&quot;5000&quot;</span><span class="hl-1"> </span><span class="hl-6">width</span><span class="hl-1">=</span><span class="hl-2">&quot;200px&quot;</span><span class="hl-1"> </span><span class="hl-6">height</span><span class="hl-1">=</span><span class="hl-2">&quot;150px&quot;</span><span class="hl-1"> /&gt;</span>
 </code><button type="button">Copy</button></pre>
 
-</div></div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface </span><span class="tsd-kind-interface">SlideProperty</span> <span class="tsd-signature-symbol">{ </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide_ts.SlideProperty.html#duration">duration</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide_ts.SlideProperty.html#entries">entries</a><span class="tsd-signature-symbol">: </span><a href="utils_types_slide_ts.SlideEntry.html" class="tsd-signature-type tsd-kind-interface">SlideEntry</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide_ts.SlideProperty.html#height">height</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide_ts.SlideProperty.html#width">width</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:36</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="utils_types_slide_ts.SlideProperty.html#duration" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>duration</span></a>
-<a href="utils_types_slide_ts.SlideProperty.html#entries" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>entries</span></a>
-<a href="utils_types_slide_ts.SlideProperty.html#height" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>height</span></a>
-<a href="utils_types_slide_ts.SlideProperty.html#width" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>width</span></a>
+</div></div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface </span><span class="tsd-kind-interface">SlideProperty</span> <span class="tsd-signature-symbol">{ </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide.SlideProperty.html#duration">duration</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide.SlideProperty.html#entries">entries</a><span class="tsd-signature-symbol">: </span><a href="utils_types_slide.SlideEntry.html" class="tsd-signature-type tsd-kind-interface">SlideEntry</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide.SlideProperty.html#height">height</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><a class="tsd-kind-property" href="utils_types_slide.SlideProperty.html#width">width</a><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:36</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="utils_types_slide.SlideProperty.html#duration" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>duration</span></a>
+<a href="utils_types_slide.SlideProperty.html#entries" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>entries</span></a>
+<a href="utils_types_slide.SlideProperty.html#height" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>height</span></a>
+<a href="utils_types_slide.SlideProperty.html#width" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>width</span></a>
 </div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Properties</h2></summary><section><section class="tsd-panel tsd-member"><a id="duration" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>duration</span><a href="#duration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">duration</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>duration for each slide to show in milliseconds</p>
-</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:38</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="entries" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>entries</span><a href="#entries" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">entries</span><span class="tsd-signature-symbol">:</span> <a href="utils_types_slide_ts.SlideEntry.html" class="tsd-signature-type tsd-kind-interface">SlideEntry</a><span class="tsd-signature-symbol">[]</span></div><div class="tsd-comment tsd-typography"><p>slides to show</p>
+</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:38</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="entries" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>entries</span><a href="#entries" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">entries</span><span class="tsd-signature-symbol">:</span> <a href="utils_types_slide.SlideEntry.html" class="tsd-signature-type tsd-kind-interface">SlideEntry</a><span class="tsd-signature-symbol">[]</span></div><div class="tsd-comment tsd-typography"><p>slides to show</p>
 </div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:37</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="height" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>height</span><a href="#height" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">height</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>css height property value</p>
 </div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:40</li></ul></aside></section><section class="tsd-panel tsd-member"><a id="width" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>width</span><a href="#width" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">width</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>css width property value</p>
 </div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:39</li></ul></aside></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="tsd-otp-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Properties</summary><div><a href="#duration" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>duration</span></a><a href="#entries" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>entries</span></a><a href="#height" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>height</span></a><a href="#width" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>width</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/docs/modules.html b/docs/modules.html
index 8a526d2..cf7bd19 100644
--- a/docs/modules.html
+++ b/docs/modules.html
@@ -2,6 +2,7 @@
 <a href="modules/api_getArticleList.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>api/get<wbr/>Article<wbr/>List</span></a>
 <a href="modules/api_getGalleryImages.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>api/get<wbr/>Gallery<wbr/>Images</span></a>
 <a href="modules/api_getTime.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>api/get<wbr/>Time</span></a>
+<a href="modules/composables_backgroundImageOptimization.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>composables/background<wbr/>Image<wbr/>Optimization</span></a>
 <a href="modules/composables_scrollDistance.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>composables/scroll<wbr/>Distance</span></a>
 <a href="modules/composables_windowDimensions.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>composables/window<wbr/>Dimensions</span></a>
 <a href="modules/utils_asyncDatabase.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/async<wbr/>Database</span></a>
@@ -10,10 +11,11 @@
 <a href="modules/utils_types_galleryEntry.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/gallery<wbr/>Entry</span></a>
 <a href="modules/utils_types_hamburgerMenu.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/hamburger<wbr/>Menu</span></a>
 <a href="modules/utils_types_linkCard.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/link<wbr/>Card</span></a>
+<a href="modules/utils_types_linksGrid.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/links<wbr/>Grid</span></a>
 <a href="modules/utils_types_news.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/news</span></a>
 <a href="modules/utils_types_newsCard.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/news<wbr/>Card</span></a>
 <a href="modules/utils_types_pageTop.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/page<wbr/>Top</span></a>
 <a href="modules/utils_types_pankuzuList.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/pankuzu<wbr/>List</span></a>
 <a href="modules/utils_types_qAndABox.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/q<wbr/>AndABox</span></a>
-<a href="modules/utils_types_slide_ts.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/slide.ts</span></a>
+<a href="modules/utils_types_slide.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-2"></use></svg><span>utils/types/slide</span></a>
 </div></section></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/docs/modules/composables_backgroundImageOptimization.html b/docs/modules/composables_backgroundImageOptimization.html
new file mode 100644
index 0000000..ee5b641
--- /dev/null
+++ b/docs/modules/composables_backgroundImageOptimization.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>composables/backgroundImageOptimization | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="composables_backgroundImageOptimization.html">composables/backgroundImageOptimization</a></li></ul><h1>Module composables/backgroundImageOptimization</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Vue Composable for optimizing image used in background-image.</p>
+</div><div class="tsd-comment tsd-typography"></div></section><aside class="tsd-sources"><ul><li>Defined in composables/backgroundImageOptimization.ts:1</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Functions</h3><div class="tsd-index-list"><a href="../functions/composables_backgroundImageOptimization.useBackgroundImageOptimization.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-64"></use></svg><span>use<wbr/>Background<wbr/>Image<wbr/>Optimization</span></a>
+</div></section></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/docs/modules/utils_types_linksGrid.html b/docs/modules/utils_types_linksGrid.html
new file mode 100644
index 0000000..1f751a7
--- /dev/null
+++ b/docs/modules/utils_types_linksGrid.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>utils/types/linksGrid | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="utils_types_linksGrid.html">utils/types/linksGrid</a></li></ul><h1>Module utils/types/linksGrid</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Types for LinksGrid component</p>
+</div><div class="tsd-comment tsd-typography"></div></section><aside class="tsd-sources"><ul><li>Defined in utils/types/linksGrid.ts:1</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Interfaces</h3><div class="tsd-index-list"><a href="../interfaces/utils_types_linksGrid.LinksGridProperty.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-256"></use></svg><span>Links<wbr/>Grid<wbr/>Property</span></a>
+</div></section></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/docs/modules/utils_types_slide_ts.html b/docs/modules/utils_types_slide.html
similarity index 55%
rename from docs/modules/utils_types_slide_ts.html
rename to docs/modules/utils_types_slide.html
index 5dc12b0..17da66e 100644
--- a/docs/modules/utils_types_slide_ts.html
+++ b/docs/modules/utils_types_slide.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>utils/types/slide.ts | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="utils_types_slide_ts.html">utils/types/slide.ts</a></li></ul><h1>Module utils/types/slide.ts</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Types for Slide component</p>
-</div><div class="tsd-comment tsd-typography"></div></section><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:1</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Interfaces</h3><div class="tsd-index-list"><a href="../interfaces/utils_types_slide_ts.SlideEntry.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-256"></use></svg><span>Slide<wbr/>Entry</span></a>
-<a href="../interfaces/utils_types_slide_ts.SlideProperty.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-256"></use></svg><span>Slide<wbr/>Property</span></a>
+<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>utils/types/slide | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="utils_types_slide.html">utils/types/slide</a></li></ul><h1>Module utils/types/slide</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Types for Slide component</p>
+</div><div class="tsd-comment tsd-typography"></div></section><aside class="tsd-sources"><ul><li>Defined in utils/types/slide.ts:1</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Interfaces</h3><div class="tsd-index-list"><a href="../interfaces/utils_types_slide.SlideEntry.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-256"></use></svg><span>Slide<wbr/>Entry</span></a>
+<a href="../interfaces/utils_types_slide.SlideProperty.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-256"></use></svg><span>Slide<wbr/>Property</span></a>
 </div></section></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
diff --git a/pages/about/index.vue b/pages/about/index.vue
index 2e5293b..11413d5 100644
--- a/pages/about/index.vue
+++ b/pages/about/index.vue
@@ -1,4 +1,31 @@
 <script setup lang="ts">
+const linksList: Array<LinkCardProperty> = [
+    {
+        title: "SERAについて",
+        description: "岐阜工業高等専門学校宇宙工学研究会【SERA】の概要です。",
+        link: "/about/sera",
+        imagePath: "",
+    },
+    {
+        title: "活動実績",
+        description: "SERAの活動実績、受賞歴を紹介します。",
+        link: "/about/achievements",
+        imagePath: "",
+    },
+    {
+        title: "写真集",
+        description: "大会や普段の活動での様子です。",
+        link: "/about/gallery",
+        imagePath: "",
+    },
+    {
+        title: "中学生・新入生向け",
+        description: "部活のFAQを集めてみました。",
+        link: "/about/for-middle-schoolers-and-new-comers",
+        imagePath: "",
+    },
+];
+
 useSeoMeta(
     generateSeoMeta(
         "About Us",
@@ -12,56 +39,30 @@ useSeoMeta(
     <PageTop text="クラブ情報" image-path="/images/page-top.jpg" />
     <PankuzuList />
     <main>
-        <ul>
-            <li>
-                <LinkCard
-                    title="SERAについて"
-                    description="岐阜工業高等専門学校宇宙工学研究会【SERA】の概要です。"
-                    link="/about/sera"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="活動実績"
-                    description="SERAの活動実績、受賞歴を紹介します。"
-                    link="/about/achievements"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="写真集"
-                    description="大会や普段の活動での様子です。"
-                    link="/about/gallery"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="中学生・新入生向け"
-                    description="部活のFAQを集めてみました。"
-                    link="/about/for-middle-schoolers-and-new-comers"
-                />
-            </li>
-        </ul>
+        <LinksGrid id="links" :links="linksList" />
     </main>
 </template>
 
 <style scoped>
-ul {
-    list-style: none;
-    display: grid;
-    gap: 20px;
-    grid: repeat(2, 1fr) / repeat(2, 1fr);
-    width: fit-content;
-    padding: 0;
-    margin: auto;
+main {
+    display: flex;
+    justify-content: center;
 }
 
-@media screen and (max-width: 1024px) {
+#links {
+    width: 80%;
+    max-width: 64rem;
+}
+
+@media screen and (max-width: 960px) {
     main {
         margin: var(--main-margin-top-bottom) 0;
     }
-    ul {
-        grid: repeat(3, 1fr) / 1fr;
+}
+
+@media screen and (max-width: 640px) {
+    main {
+        margin: var(--main-margin-top-bottom) 0;
     }
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 6eeaa6c..fb34d5b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import { marked } from "marked";
+import DOMPurify from "isomorphic-dompurify";
 import { EntryType, type NewsEntry } from "~/utils/types/news";
 import type { SlideEntry } from "~/utils/types/slide";
 import SiteInfo from "~/assets/siteinfo.json";
 
+const backgroundImageOptimization = useBackgroundImageOptimization();
+const backgroundImageOptimizer = (path: string) => {
+    backgroundImageOptimization.backgroundImageStyles.value = path;
+    const ret = backgroundImageOptimization.backgroundImageStyles.value;
+    return ret;
+};
+
 const { data } = await useFetch("/api/getNewsList");
 
 const getNewsEntriesForSlide = (): Array<SlideEntry> => {
@@ -58,6 +66,12 @@ const slidesForProjects: Array<SlideEntry> = [
     },
 ];
 
+let slideEntries = ref<Array<SlideEntry>>([
+    ...welcomeSlide,
+    ...getNewsEntriesForSlide(),
+    ...slidesForProjects,
+]);
+
 interface QuickLinkEntry {
     label: string;
     imagePath: string;
@@ -82,10 +96,6 @@ const quickLinkEntries: Array<QuickLinkEntry> = [
     },
 ];
 
-let slideEntries = ref<Array<SlideEntry>>(
-    welcomeSlide.concat(getNewsEntriesForSlide(), slidesForProjects)
-);
-
 onMounted(() => {
     const twitterScript = document.createElement("script");
     const twitterDivision = document.getElementById("twitter");
@@ -110,7 +120,7 @@ useSeoMeta(
             :entries="slideEntries"
             :duration="6000"
             width="100vw"
-            height="max(50svh, 30rem)"
+            height="max(50svh, 32rem)"
             id="slide"
         />
         <div id="quick-links-container">
@@ -119,7 +129,7 @@ useSeoMeta(
                     class="quick-link-entry"
                     v-for="entry in quickLinkEntries"
                     :key="quickLinkEntries.indexOf(entry)"
-                    :style="{ backgroundImage: `url('${entry.imagePath}')` }"
+                    :style="backgroundImageOptimizer(entry.imagePath)"
                 >
                     <NuxtLink :to="entry.link">
                         <h2>{{ entry.label }}</h2>
@@ -150,7 +160,13 @@ useSeoMeta(
                         </div>
                     </div>
                     <article
-                        v-html="marked.parse(entry.cardContent as string)"
+                        v-html="
+                            DOMPurify.sanitize(
+                                marked.parse(
+                                    entry.cardContent as string
+                                ) as string
+                            )
+                        "
                     ></article>
                     <NuxtLink
                         v-if="entry.entryType === EntryType.Article"
@@ -256,12 +272,15 @@ main:last-child {
     #quick-links {
         width: 100vw;
         height: 100vw;
+        min-height: calc(30rem + 2 * var(--quick-link-margin));
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, 1fr);
         margin-inline: 0;
     }
-    .quick-link-entry > a > h2 {
-        font-size: 7cqi;
+    .quick-link-entry {
+        & > a > h2 {
+            font-size: 7cqi;
+        }
     }
 }
 
diff --git a/pages/news/index.vue b/pages/news/index.vue
index 2c418aa..8f9dd23 100644
--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -34,15 +34,6 @@ useSeoMeta(
     margin: 1rem 0;
 }
 
-.news-list > div:has(a) {
-    transition: all 0.3s ease-in-out;
-    &:hover {
-        scale: 105%;
-        filter: grayscale(25%);
-        transition: all 0.3s ease-in-out;
-    }
-}
-
 @media screen and (max-width: 640px) {
     .news-list {
         grid-auto-flow: row;
diff --git a/pages/projects/index.vue b/pages/projects/index.vue
index b975643..72517e8 100644
--- a/pages/projects/index.vue
+++ b/pages/projects/index.vue
@@ -1,4 +1,35 @@
 <script setup lang="ts">
+const linksList: Array<LinkCardProperty> = [
+    {
+        title: "Rocket開発チーム",
+        description:
+            "SERA Rocket開発チームです。モデルロケットの製作を中心に活動しており、ロケットに関する知識を高めることを目指しています。",
+        link: "/projects/rocket",
+        imagePath: "/images/rocket_top.jpg",
+    },
+    {
+        title: "CanSat開発チーム",
+        description:
+            "SERA CanSat開発チームです。缶サットの製作を中心に活動しており、人工衛星などに関する知識を高めることを目指しています。",
+        link: "/projects/cansat",
+        imagePath: "/images/cansat_top.jpg",
+    },
+    {
+        title: "教育プロジェクト",
+        description:
+            "SERAでは主に新入会員の教育を目的に、教育用ローバー(CanSat)の開発を行っています。外部でも使用できるようなキットを目指して開発中です。",
+        link: "/projects/education",
+        imagePath: "/images/education/education-1.jpg",
+    },
+    {
+        title: "CubeSat KOSEN-X",
+        description:
+            "高専連携による超小型衛星開発についてです。高専スペース連携が中心となって製作しているCubeSatのプロジェクトに一部の部員が参加させて頂いております。",
+        link: "/projects/kosen-x",
+        imagePath: "/images/kosen1_gunma-cgv5-a.JPG",
+    },
+];
+
 useSeoMeta(
     generateSeoMeta(
         "Projects",
@@ -12,60 +43,36 @@ useSeoMeta(
     <PageTop text="Projects" image-path="/images/page-top.jpg" />
     <PankuzuList />
     <main>
-        <ul class="cards-list">
-            <li>
-                <LinkCard
-                    title="Rocket開発チーム"
-                    description="SERA Rocket開発チームです。モデルロケットの製作を中心に活動しており、ロケットに関する知識を高めることを目指しています。"
-                    link="/projects/rocket"
-                    image-path="/images/rocket_top.jpg"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="CanSat開発チーム"
-                    description="SERA CanSat開発チームです。缶サットの製作を中心に活動しており、人工衛星などに関する知識を高めることを目指しています。"
-                    link="/projects/cansat"
-                    image-path="/images/cansat_top.jpg"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="教育プロジェクト"
-                    description="SERAでは主に新入会員の教育を目的に、教育用ローバー(CanSat)の開発を行っています。外部でも使用できるようなキットを目指して開発中です。"
-                    link="/projects/education"
-                    image-path="/images/education/education-1.jpg"
-                />
-            </li>
-            <li>
-                <LinkCard
-                    title="CubeSat KOSEN-X"
-                    description="高専連携による超小型衛星開発についてです。高専スペース連携が中心となって製作しているCubeSatのプロジェクトに一部の部員が参加させて頂いております。"
-                    link="/projects/kosen-x"
-                    image-path="/images/kosen1_gunma-cgv5-a.JPG"
-                />
-            </li>
-        </ul>
+        <LinksGrid class="cards-list" :links="linksList" />
     </main>
 </template>
 
 <style scoped>
-.cards-list {
-    list-style: none;
-    display: grid;
-    grid: repeat(2, auto) / repeat(2, auto);
-    gap: 2rem;
-    width: fit-content;
-    padding: 0;
-    margin: auto;
+main {
+    display: flex;
+    justify-content: center;
 }
 
-@media screen and (max-width: 1024px) {
+.cards-list {
+    width: 80%;
+    max-width: 64rem;
+}
+
+@media screen and (max-width: 1080px) {
     main {
         margin: var(--main-margin-top-bottom) 0;
     }
-    .cards-list {
-        grid: repeat(4, 1fr) / 1fr;
+}
+
+@media screen and (max-width: 960px) {
+    main {
+        margin: var(--main-margin-top-bottom) 0;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    main {
+        margin: var(--main-margin-top-bottom) 0;
     }
 }
 </style>
diff --git a/utils/asyncDatabase.ts b/utils/asyncDatabase.ts
index 474dacb..61de7c8 100644
--- a/utils/asyncDatabase.ts
+++ b/utils/asyncDatabase.ts
@@ -31,12 +31,14 @@ const asyncDatabaseRead = async <Type>(
     callback: asyncDatabaseRowsCallbackFunction
 ): Promise<Type> => {
     return new Promise((resolve, reject) => {
-        database.all(sqlQuery, (error: Error, rows: any) => {
-            if (error !== null) {
-                reject(error);
-            } else {
-                resolve(callback(rows));
-            }
+        database.serialize(() => {
+            database.all(sqlQuery, (error: Error, rows: any) => {
+                if (error !== null) {
+                    reject(error);
+                } else {
+                    resolve(callback(rows));
+                }
+            });
         });
     });
 };
@@ -57,12 +59,14 @@ const asyncDatabaseWrite = async <Type>(
     callback: asyncDatabaseVoidCallbackFunction
 ): Promise<Type> => {
     return new Promise((resolve, reject) => {
-        database.run(sqlQuery, (error: Error) => {
-            if (error !== null) {
-                reject(error);
-            } else {
-                resolve(callback());
-            }
+        database.serialize(() => {
+            database.run(sqlQuery, (error: Error) => {
+                if (error !== null) {
+                    reject(error);
+                } else {
+                    resolve(callback());
+                }
+            });
         });
     });
 };
diff --git a/utils/types/linksGrid.ts b/utils/types/linksGrid.ts
new file mode 100644
index 0000000..d8bc94e
--- /dev/null
+++ b/utils/types/linksGrid.ts
@@ -0,0 +1,33 @@
+/**
+ * Types for LinksGrid component
+ * @module utils/types/linksGrid
+ */
+
+import type { LinkCardProperty } from "./linkCard";
+
+/**
+ * Interface that defines property for LinksGrid component
+ * @property {Array<LinkCardProperty>} links Array of property of LinkCard components
+ * @example
+ * const linksList = [
+ *     {
+ *         title: "test 1",
+ *         description: "Test Page #1",
+ *         link: "/test/1",
+ *         imagePath: "/images/test-1.png",
+ *     },
+ *     ...
+ *     {
+ *         title: "test n",
+ *         description: "Test Page #n",
+ *         link: "/test/n",
+ *         imagePath: "/images/test-n.png",
+ *     },
+ * ];
+ * <LinksGrid :links="linksList" />
+ */
+interface LinksGridProperty {
+    links: Array<LinkCardProperty>;
+}
+
+export type { LinksGridProperty };
diff --git a/utils/types/slide.ts b/utils/types/slide.ts
index 61ebdf2..fe49ae7 100644
--- a/utils/types/slide.ts
+++ b/utils/types/slide.ts
@@ -1,6 +1,6 @@
 /**
  * Types for Slide component
- * @module utils/types/slide.ts
+ * @module utils/types/slide
  */
 
 /**