@ioca/react 1.4.81 → 1.5.2

package/lib/css/utilities.css

@@ -0,0 +1,1974 @@
+kbd,
+.kbd,
+code,
+.code {
+    display: inline-block;
+    font-family: inherit;
+    margin: 0 0.2em;
+    padding: 0 0.4em;
+    border-radius: 4px;
+    font-size: 0.86em;
+    line-height: 1.5;
+    white-space: nowrap;
+}
+
+.code,
+code {
+    background: var(--color-8);
+    color: var(--color-0);
+    font-family: unset;
+}
+
+kbd,
+.kbd {
+    background-color: var(--white);
+    color: var(--black);
+    border-right: 2px solid var(--grey-1);
+    border-bottom: 3px solid var(--grey-1);
+    box-shadow: -1px -1px 1px var(--color-9);
+}
+
+.chip {
+    padding: 0.05em 0.72em;
+    font-size: 0.94em;
+    background: var(--color-main);
+    color: var(--color-main-reverse);
+    border-radius: var(--radius);
+    transition: var(--transition);
+
+    &:hover {
+        --background-hover: var(--color-main-1);
+        background: var(--background-hover);
+    }
+}
+
+.link {
+    display: inline-flex;
+    position: relative;
+    white-space: nowrap;
+    color: var(--blue);
+}
+
+:root {
+    scrollbar-gutter: auto;
+
+    .absolute {
+        position: absolute;
+    }
+
+    .relative {
+        position: relative;
+    }
+
+    .fixed {
+        position: fixed;
+    }
+
+    .inset-0 {
+        inset: 0;
+    }
+
+    .flex {
+        display: flex;
+        gap: inherit;
+    }
+
+    .grid {
+        display: grid;
+    }
+
+    .flex-column {
+        flex-direction: column;
+    }
+
+    .flex-wrap {
+        flex-wrap: wrap;
+    }
+
+    .flex-1 {
+        flex: 1;
+    }
+
+    .flex-shrink {
+        flex-shrink: 0;
+    }
+
+    .sticky-top {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
+
+    .sticky-bottom {
+        position: sticky;
+        bottom: 0;
+        z-index: 10;
+    }
+
+    .sticky-left {
+        position: sticky;
+        left: 0;
+        z-index: 10;
+    }
+
+    .sticky-right {
+        position: sticky;
+        right: 0;
+        z-index: 10;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
+    .text-right {
+        text-align: right;
+    }
+
+    .bordered {
+        border: 1px solid var(--color-7);
+    }
+
+    .ellipsis {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .overflow-hidden {
+        overflow: hidden;
+    }
+
+    .overflow-auto {
+        overflow: auto;
+    }
+
+    .justify-center {
+        justify-content: center;
+    }
+
+    .justify-evenly {
+        justify-content: space-evenly;
+    }
+
+    .justify-between {
+        justify-content: space-between;
+    }
+
+    .justify-start {
+        justify-content: flex-start;
+    }
+
+    .justify-end {
+        justify-content: flex-end;
+    }
+
+    .items-start {
+        align-items: flex-start;
+    }
+
+    .items-end {
+        align-items: flex-end;
+    }
+
+    .items-center {
+        align-items: center;
+    }
+
+    .self-center {
+        align-self: center;
+    }
+
+    .h-100vh {
+        height: 100vh;
+    }
+
+    .bg-blur {
+        background: var(--background-opacity);
+        backdrop-filter: var(--blur);
+    }
+
+    .roundless {
+        border-radius: 0;
+    }
+
+    .round {
+        border-radius: 50vw;
+    }
+
+    .round-0 {
+        border-radius: var(--radius);
+    }
+
+    .disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+
+    .hidden {
+        display: none !important;
+    }
+
+    .shadow {
+        box-shadow: var(--shadow);
+    }
+
+    .hover-shadow {
+        transition: var(--transition);
+
+        &:hover {
+            box-shadow: var(--shadow);
+        }
+    }
+
+    .hover-text-shadow {
+        transition: var(--transition);
+
+        &:hover {
+            text-shadow: var(--shadow);
+        }
+    }
+
+    .no-transition {
+        transition: none;
+    }
+
+    .hover-opacity {
+        opacity: 0;
+        transition: var(--transition);
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    .hover-children {
+        opacity: 0;
+        transform: var(--transition);
+    }
+
+    .hover-parent {
+        &:hover {
+            .hover-children {
+                opacity: 1;
+            }
+        }
+    }
+
+    .bg-transparent {
+        background: transparent;
+    }
+
+    .font-italic {
+        font-style: italic;
+    }
+
+    .font-bold {
+        font-weight: 600;
+    }
+
+    .font-sm {
+        font-size: 0.8em;
+    }
+
+    .font-lg {
+        font-size: 1.2em;
+    }
+
+    .mg-auto {
+        margin: auto;
+    }
+
+    .mx-auto {
+        margin-inline: auto;
+    }
+
+    .my-auto {
+        margin-block: auto;
+    }
+
+    .ml-auto {
+        margin-left: auto;
+    }
+
+    .mr-auto {
+        margin-right: auto;
+    }
+
+    .mt-auto {
+        margin-top: auto;
+    }
+
+    .mb-auto {
+        margin-bottom: auto;
+    }
+
+    .mg-0 {
+        margin: 0px;
+    }
+
+    .mx-0 {
+        margin-inline: 0px;
+    }
+
+    .my-0 {
+        margin-block: 0px;
+    }
+
+    .mt-0 {
+        margin-top: 0px;
+    }
+
+    .mb-0 {
+        margin-bottom: 0px;
+    }
+
+    .ml-0 {
+        margin-left: 0px;
+    }
+
+    .mr-0 {
+        margin-right: 0px;
+    }
+
+    .pd-0 {
+        padding: 0px;
+    }
+
+    .px-0 {
+        padding-inline: 0px;
+    }
+
+    .py-0 {
+        padding-block: 0px;
+    }
+
+    .pl-0 {
+        padding-left: 0px;
+    }
+
+    .pr-0 {
+        padding-right: 0px;
+    }
+
+    .pt-0 {
+        padding-top: 0px;
+    }
+
+    .pb-0 {
+        padding-bottom: 0px;
+    }
+
+    .gap-0 {
+        gap: 0px;
+    }
+
+    .mg-1 {
+        margin: 1px;
+    }
+
+    .mx-1 {
+        margin-inline: 1px;
+    }
+
+    .my-1 {
+        margin-block: 1px;
+    }
+
+    .mt-1 {
+        margin-top: 1px;
+    }
+
+    .mb-1 {
+        margin-bottom: 1px;
+    }
+
+    .ml-1 {
+        margin-left: 1px;
+    }
+
+    .mr-1 {
+        margin-right: 1px;
+    }
+
+    .pd-1 {
+        padding: 1px;
+    }
+
+    .px-1 {
+        padding-inline: 1px;
+    }
+
+    .py-1 {
+        padding-block: 1px;
+    }
+
+    .pl-1 {
+        padding-left: 1px;
+    }
+
+    .pr-1 {
+        padding-right: 1px;
+    }
+
+    .pt-1 {
+        padding-top: 1px;
+    }
+
+    .pb-1 {
+        padding-bottom: 1px;
+    }
+
+    .gap-1 {
+        gap: 1px;
+    }
+
+    .mg-2 {
+        margin: 2px;
+    }
+
+    .mx-2 {
+        margin-inline: 2px;
+    }
+
+    .my-2 {
+        margin-block: 2px;
+    }
+
+    .mt-2 {
+        margin-top: 2px;
+    }
+
+    .mb-2 {
+        margin-bottom: 2px;
+    }
+
+    .ml-2 {
+        margin-left: 2px;
+    }
+
+    .mr-2 {
+        margin-right: 2px;
+    }
+
+    .pd-2 {
+        padding: 2px;
+    }
+
+    .px-2 {
+        padding-inline: 2px;
+    }
+
+    .py-2 {
+        padding-block: 2px;
+    }
+
+    .pl-2 {
+        padding-left: 2px;
+    }
+
+    .pr-2 {
+        padding-right: 2px;
+    }
+
+    .pt-2 {
+        padding-top: 2px;
+    }
+
+    .pb-2 {
+        padding-bottom: 2px;
+    }
+
+    .gap-2 {
+        gap: 2px;
+    }
+
+    .mg-4 {
+        margin: 4px;
+    }
+
+    .mx-4 {
+        margin-inline: 4px;
+    }
+
+    .my-4 {
+        margin-block: 4px;
+    }
+
+    .mt-4 {
+        margin-top: 4px;
+    }
+
+    .mb-4 {
+        margin-bottom: 4px;
+    }
+
+    .ml-4 {
+        margin-left: 4px;
+    }
+
+    .mr-4 {
+        margin-right: 4px;
+    }
+
+    .pd-4 {
+        padding: 4px;
+    }
+
+    .px-4 {
+        padding-inline: 4px;
+    }
+
+    .py-4 {
+        padding-block: 4px;
+    }
+
+    .pl-4 {
+        padding-left: 4px;
+    }
+
+    .pr-4 {
+        padding-right: 4px;
+    }
+
+    .pt-4 {
+        padding-top: 4px;
+    }
+
+    .pb-4 {
+        padding-bottom: 4px;
+    }
+
+    .gap-4 {
+        gap: 4px;
+    }
+
+    .mg-6 {
+        margin: 6px;
+    }
+
+    .mx-6 {
+        margin-inline: 6px;
+    }
+
+    .my-6 {
+        margin-block: 6px;
+    }
+
+    .mt-6 {
+        margin-top: 6px;
+    }
+
+    .mb-6 {
+        margin-bottom: 6px;
+    }
+
+    .ml-6 {
+        margin-left: 6px;
+    }
+
+    .mr-6 {
+        margin-right: 6px;
+    }
+
+    .pd-6 {
+        padding: 6px;
+    }
+
+    .px-6 {
+        padding-inline: 6px;
+    }
+
+    .py-6 {
+        padding-block: 6px;
+    }
+
+    .pl-6 {
+        padding-left: 6px;
+    }
+
+    .pr-6 {
+        padding-right: 6px;
+    }
+
+    .pt-6 {
+        padding-top: 6px;
+    }
+
+    .pb-6 {
+        padding-bottom: 6px;
+    }
+
+    .gap-6 {
+        gap: 6px;
+    }
+
+    .mg-8 {
+        margin: 8px;
+    }
+
+    .mx-8 {
+        margin-inline: 8px;
+    }
+
+    .my-8 {
+        margin-block: 8px;
+    }
+
+    .mt-8 {
+        margin-top: 8px;
+    }
+
+    .mb-8 {
+        margin-bottom: 8px;
+    }
+
+    .ml-8 {
+        margin-left: 8px;
+    }
+
+    .mr-8 {
+        margin-right: 8px;
+    }
+
+    .pd-8 {
+        padding: 8px;
+    }
+
+    .px-8 {
+        padding-inline: 8px;
+    }
+
+    .py-8 {
+        padding-block: 8px;
+    }
+
+    .pl-8 {
+        padding-left: 8px;
+    }
+
+    .pr-8 {
+        padding-right: 8px;
+    }
+
+    .pt-8 {
+        padding-top: 8px;
+    }
+
+    .pb-8 {
+        padding-bottom: 8px;
+    }
+
+    .gap-8 {
+        gap: 8px;
+    }
+
+    .mg-10 {
+        margin: 10px;
+    }
+
+    .mx-10 {
+        margin-inline: 10px;
+    }
+
+    .my-10 {
+        margin-block: 10px;
+    }
+
+    .mt-10 {
+        margin-top: 10px;
+    }
+
+    .mb-10 {
+        margin-bottom: 10px;
+    }
+
+    .ml-10 {
+        margin-left: 10px;
+    }
+
+    .mr-10 {
+        margin-right: 10px;
+    }
+
+    .pd-10 {
+        padding: 10px;
+    }
+
+    .px-10 {
+        padding-inline: 10px;
+    }
+
+    .py-10 {
+        padding-block: 10px;
+    }
+
+    .pl-10 {
+        padding-left: 10px;
+    }
+
+    .pr-10 {
+        padding-right: 10px;
+    }
+
+    .pt-10 {
+        padding-top: 10px;
+    }
+
+    .pb-10 {
+        padding-bottom: 10px;
+    }
+
+    .gap-10 {
+        gap: 10px;
+    }
+
+    .mg-12 {
+        margin: 12px;
+    }
+
+    .mx-12 {
+        margin-inline: 12px;
+    }
+
+    .my-12 {
+        margin-block: 12px;
+    }
+
+    .mt-12 {
+        margin-top: 12px;
+    }
+
+    .mb-12 {
+        margin-bottom: 12px;
+    }
+
+    .ml-12 {
+        margin-left: 12px;
+    }
+
+    .mr-12 {
+        margin-right: 12px;
+    }
+
+    .pd-12 {
+        padding: 12px;
+    }
+
+    .px-12 {
+        padding-inline: 12px;
+    }
+
+    .py-12 {
+        padding-block: 12px;
+    }
+
+    .pl-12 {
+        padding-left: 12px;
+    }
+
+    .pr-12 {
+        padding-right: 12px;
+    }
+
+    .pt-12 {
+        padding-top: 12px;
+    }
+
+    .pb-12 {
+        padding-bottom: 12px;
+    }
+
+    .gap-12 {
+        gap: 12px;
+    }
+
+    .mg-16 {
+        margin: 16px;
+    }
+
+    .mx-16 {
+        margin-inline: 16px;
+    }
+
+    .my-16 {
+        margin-block: 16px;
+    }
+
+    .mt-16 {
+        margin-top: 16px;
+    }
+
+    .mb-16 {
+        margin-bottom: 16px;
+    }
+
+    .ml-16 {
+        margin-left: 16px;
+    }
+
+    .mr-16 {
+        margin-right: 16px;
+    }
+
+    .pd-16 {
+        padding: 16px;
+    }
+
+    .px-16 {
+        padding-inline: 16px;
+    }
+
+    .py-16 {
+        padding-block: 16px;
+    }
+
+    .pl-16 {
+        padding-left: 16px;
+    }
+
+    .pr-16 {
+        padding-right: 16px;
+    }
+
+    .pt-16 {
+        padding-top: 16px;
+    }
+
+    .pb-16 {
+        padding-bottom: 16px;
+    }
+
+    .gap-16 {
+        gap: 16px;
+    }
+
+    .mg-20 {
+        margin: 20px;
+    }
+
+    .mx-20 {
+        margin-inline: 20px;
+    }
+
+    .my-20 {
+        margin-block: 20px;
+    }
+
+    .mt-20 {
+        margin-top: 20px;
+    }
+
+    .mb-20 {
+        margin-bottom: 20px;
+    }
+
+    .ml-20 {
+        margin-left: 20px;
+    }
+
+    .mr-20 {
+        margin-right: 20px;
+    }
+
+    .pd-20 {
+        padding: 20px;
+    }
+
+    .px-20 {
+        padding-inline: 20px;
+    }
+
+    .py-20 {
+        padding-block: 20px;
+    }
+
+    .pl-20 {
+        padding-left: 20px;
+    }
+
+    .pr-20 {
+        padding-right: 20px;
+    }
+
+    .pt-20 {
+        padding-top: 20px;
+    }
+
+    .pb-20 {
+        padding-bottom: 20px;
+    }
+
+    .gap-20 {
+        gap: 20px;
+    }
+
+    .mg-24 {
+        margin: 24px;
+    }
+
+    .mx-24 {
+        margin-inline: 24px;
+    }
+
+    .my-24 {
+        margin-block: 24px;
+    }
+
+    .mt-24 {
+        margin-top: 24px;
+    }
+
+    .mb-24 {
+        margin-bottom: 24px;
+    }
+
+    .ml-24 {
+        margin-left: 24px;
+    }
+
+    .mr-24 {
+        margin-right: 24px;
+    }
+
+    .pd-24 {
+        padding: 24px;
+    }
+
+    .px-24 {
+        padding-inline: 24px;
+    }
+
+    .py-24 {
+        padding-block: 24px;
+    }
+
+    .pl-24 {
+        padding-left: 24px;
+    }
+
+    .pr-24 {
+        padding-right: 24px;
+    }
+
+    .pt-24 {
+        padding-top: 24px;
+    }
+
+    .pb-24 {
+        padding-bottom: 24px;
+    }
+
+    .gap-24 {
+        gap: 24px;
+    }
+
+    .mg-28 {
+        margin: 28px;
+    }
+
+    .mx-28 {
+        margin-inline: 28px;
+    }
+
+    .my-28 {
+        margin-block: 28px;
+    }
+
+    .mt-28 {
+        margin-top: 28px;
+    }
+
+    .mb-28 {
+        margin-bottom: 28px;
+    }
+
+    .ml-28 {
+        margin-left: 28px;
+    }
+
+    .mr-28 {
+        margin-right: 28px;
+    }
+
+    .pd-28 {
+        padding: 28px;
+    }
+
+    .px-28 {
+        padding-inline: 28px;
+    }
+
+    .py-28 {
+        padding-block: 28px;
+    }
+
+    .pl-28 {
+        padding-left: 28px;
+    }
+
+    .pr-28 {
+        padding-right: 28px;
+    }
+
+    .pt-28 {
+        padding-top: 28px;
+    }
+
+    .pb-28 {
+        padding-bottom: 28px;
+    }
+
+    .gap-28 {
+        gap: 28px;
+    }
+
+    .mg-32 {
+        margin: 32px;
+    }
+
+    .mx-32 {
+        margin-inline: 32px;
+    }
+
+    .my-32 {
+        margin-block: 32px;
+    }
+
+    .mt-32 {
+        margin-top: 32px;
+    }
+
+    .mb-32 {
+        margin-bottom: 32px;
+    }
+
+    .ml-32 {
+        margin-left: 32px;
+    }
+
+    .mr-32 {
+        margin-right: 32px;
+    }
+
+    .pd-32 {
+        padding: 32px;
+    }
+
+    .px-32 {
+        padding-inline: 32px;
+    }
+
+    .py-32 {
+        padding-block: 32px;
+    }
+
+    .pl-32 {
+        padding-left: 32px;
+    }
+
+    .pr-32 {
+        padding-right: 32px;
+    }
+
+    .pt-32 {
+        padding-top: 32px;
+    }
+
+    .pb-32 {
+        padding-bottom: 32px;
+    }
+
+    .gap-32 {
+        gap: 32px;
+    }
+
+    .mg-36 {
+        margin: 36px;
+    }
+
+    .mx-36 {
+        margin-inline: 36px;
+    }
+
+    .my-36 {
+        margin-block: 36px;
+    }
+
+    .mt-36 {
+        margin-top: 36px;
+    }
+
+    .mb-36 {
+        margin-bottom: 36px;
+    }
+
+    .ml-36 {
+        margin-left: 36px;
+    }
+
+    .mr-36 {
+        margin-right: 36px;
+    }
+
+    .pd-36 {
+        padding: 36px;
+    }
+
+    .px-36 {
+        padding-inline: 36px;
+    }
+
+    .py-36 {
+        padding-block: 36px;
+    }
+
+    .pl-36 {
+        padding-left: 36px;
+    }
+
+    .pr-36 {
+        padding-right: 36px;
+    }
+
+    .pt-36 {
+        padding-top: 36px;
+    }
+
+    .pb-36 {
+        padding-bottom: 36px;
+    }
+
+    .gap-36 {
+        gap: 36px;
+    }
+
+    .mg-40 {
+        margin: 40px;
+    }
+
+    .mx-40 {
+        margin-inline: 40px;
+    }
+
+    .my-40 {
+        margin-block: 40px;
+    }
+
+    .mt-40 {
+        margin-top: 40px;
+    }
+
+    .mb-40 {
+        margin-bottom: 40px;
+    }
+
+    .ml-40 {
+        margin-left: 40px;
+    }
+
+    .mr-40 {
+        margin-right: 40px;
+    }
+
+    .pd-40 {
+        padding: 40px;
+    }
+
+    .px-40 {
+        padding-inline: 40px;
+    }
+
+    .py-40 {
+        padding-block: 40px;
+    }
+
+    .pl-40 {
+        padding-left: 40px;
+    }
+
+    .pr-40 {
+        padding-right: 40px;
+    }
+
+    .pt-40 {
+        padding-top: 40px;
+    }
+
+    .pb-40 {
+        padding-bottom: 40px;
+    }
+
+    .gap-40 {
+        gap: 40px;
+    }
+
+    .mg-48 {
+        margin: 48px;
+    }
+
+    .mx-48 {
+        margin-inline: 48px;
+    }
+
+    .my-48 {
+        margin-block: 48px;
+    }
+
+    .mt-48 {
+        margin-top: 48px;
+    }
+
+    .mb-48 {
+        margin-bottom: 48px;
+    }
+
+    .ml-48 {
+        margin-left: 48px;
+    }
+
+    .mr-48 {
+        margin-right: 48px;
+    }
+
+    .pd-48 {
+        padding: 48px;
+    }
+
+    .px-48 {
+        padding-inline: 48px;
+    }
+
+    .py-48 {
+        padding-block: 48px;
+    }
+
+    .pl-48 {
+        padding-left: 48px;
+    }
+
+    .pr-48 {
+        padding-right: 48px;
+    }
+
+    .pt-48 {
+        padding-top: 48px;
+    }
+
+    .pb-48 {
+        padding-bottom: 48px;
+    }
+
+    .gap-48 {
+        gap: 48px;
+    }
+
+    .mg-56 {
+        margin: 56px;
+    }
+
+    .mx-56 {
+        margin-inline: 56px;
+    }
+
+    .my-56 {
+        margin-block: 56px;
+    }
+
+    .mt-56 {
+        margin-top: 56px;
+    }
+
+    .mb-56 {
+        margin-bottom: 56px;
+    }
+
+    .ml-56 {
+        margin-left: 56px;
+    }
+
+    .mr-56 {
+        margin-right: 56px;
+    }
+
+    .pd-56 {
+        padding: 56px;
+    }
+
+    .px-56 {
+        padding-inline: 56px;
+    }
+
+    .py-56 {
+        padding-block: 56px;
+    }
+
+    .pl-56 {
+        padding-left: 56px;
+    }
+
+    .pr-56 {
+        padding-right: 56px;
+    }
+
+    .pt-56 {
+        padding-top: 56px;
+    }
+
+    .pb-56 {
+        padding-bottom: 56px;
+    }
+
+    .gap-56 {
+        gap: 56px;
+    }
+
+    .mg-60 {
+        margin: 60px;
+    }
+
+    .mx-60 {
+        margin-inline: 60px;
+    }
+
+    .my-60 {
+        margin-block: 60px;
+    }
+
+    .mt-60 {
+        margin-top: 60px;
+    }
+
+    .mb-60 {
+        margin-bottom: 60px;
+    }
+
+    .ml-60 {
+        margin-left: 60px;
+    }
+
+    .mr-60 {
+        margin-right: 60px;
+    }
+
+    .pd-60 {
+        padding: 60px;
+    }
+
+    .px-60 {
+        padding-inline: 60px;
+    }
+
+    .py-60 {
+        padding-block: 60px;
+    }
+
+    .pl-60 {
+        padding-left: 60px;
+    }
+
+    .pr-60 {
+        padding-right: 60px;
+    }
+
+    .pt-60 {
+        padding-top: 60px;
+    }
+
+    .pb-60 {
+        padding-bottom: 60px;
+    }
+
+    .gap-60 {
+        gap: 60px;
+    }
+
+    .mg-72 {
+        margin: 72px;
+    }
+
+    .mx-72 {
+        margin-inline: 72px;
+    }
+
+    .my-72 {
+        margin-block: 72px;
+    }
+
+    .mt-72 {
+        margin-top: 72px;
+    }
+
+    .mb-72 {
+        margin-bottom: 72px;
+    }
+
+    .ml-72 {
+        margin-left: 72px;
+    }
+
+    .mr-72 {
+        margin-right: 72px;
+    }
+
+    .pd-72 {
+        padding: 72px;
+    }
+
+    .px-72 {
+        padding-inline: 72px;
+    }
+
+    .py-72 {
+        padding-block: 72px;
+    }
+
+    .pl-72 {
+        padding-left: 72px;
+    }
+
+    .pr-72 {
+        padding-right: 72px;
+    }
+
+    .pt-72 {
+        padding-top: 72px;
+    }
+
+    .pb-72 {
+        padding-bottom: 72px;
+    }
+
+    .gap-72 {
+        gap: 72px;
+    }
+
+    .mg-80 {
+        margin: 80px;
+    }
+
+    .mx-80 {
+        margin-inline: 80px;
+    }
+
+    .my-80 {
+        margin-block: 80px;
+    }
+
+    .mt-80 {
+        margin-top: 80px;
+    }
+
+    .mb-80 {
+        margin-bottom: 80px;
+    }
+
+    .ml-80 {
+        margin-left: 80px;
+    }
+
+    .mr-80 {
+        margin-right: 80px;
+    }
+
+    .pd-80 {
+        padding: 80px;
+    }
+
+    .px-80 {
+        padding-inline: 80px;
+    }
+
+    .py-80 {
+        padding-block: 80px;
+    }
+
+    .pl-80 {
+        padding-left: 80px;
+    }
+
+    .pr-80 {
+        padding-right: 80px;
+    }
+
+    .pt-80 {
+        padding-top: 80px;
+    }
+
+    .pb-80 {
+        padding-bottom: 80px;
+    }
+
+    .gap-80 {
+        gap: 80px;
+    }
+
+    .mg-96 {
+        margin: 96px;
+    }
+
+    .mx-96 {
+        margin-inline: 96px;
+    }
+
+    .my-96 {
+        margin-block: 96px;
+    }
+
+    .mt-96 {
+        margin-top: 96px;
+    }
+
+    .mb-96 {
+        margin-bottom: 96px;
+    }
+
+    .ml-96 {
+        margin-left: 96px;
+    }
+
+    .mr-96 {
+        margin-right: 96px;
+    }
+
+    .pd-96 {
+        padding: 96px;
+    }
+
+    .px-96 {
+        padding-inline: 96px;
+    }
+
+    .py-96 {
+        padding-block: 96px;
+    }
+
+    .pl-96 {
+        padding-left: 96px;
+    }
+
+    .pr-96 {
+        padding-right: 96px;
+    }
+
+    .pt-96 {
+        padding-top: 96px;
+    }
+
+    .pb-96 {
+        padding-bottom: 96px;
+    }
+
+    .gap-96 {
+        gap: 96px;
+    }
+
+    .mg-100 {
+        margin: 100px;
+    }
+
+    .mx-100 {
+        margin-inline: 100px;
+    }
+
+    .my-100 {
+        margin-block: 100px;
+    }
+
+    .mt-100 {
+        margin-top: 100px;
+    }
+
+    .mb-100 {
+        margin-bottom: 100px;
+    }
+
+    .ml-100 {
+        margin-left: 100px;
+    }
+
+    .mr-100 {
+        margin-right: 100px;
+    }
+
+    .pd-100 {
+        padding: 100px;
+    }
+
+    .px-100 {
+        padding-inline: 100px;
+    }
+
+    .py-100 {
+        padding-block: 100px;
+    }
+
+    .pl-100 {
+        padding-left: 100px;
+    }
+
+    .pr-100 {
+        padding-right: 100px;
+    }
+
+    .pt-100 {
+        padding-top: 100px;
+    }
+
+    .pb-100 {
+        padding-bottom: 100px;
+    }
+
+    .gap-100 {
+        gap: 100px;
+    }
+
+    .mg-120 {
+        margin: 120px;
+    }
+
+    .mx-120 {
+        margin-inline: 120px;
+    }
+
+    .my-120 {
+        margin-block: 120px;
+    }
+
+    .mt-120 {
+        margin-top: 120px;
+    }
+
+    .mb-120 {
+        margin-bottom: 120px;
+    }
+
+    .ml-120 {
+        margin-left: 120px;
+    }
+
+    .mr-120 {
+        margin-right: 120px;
+    }
+
+    .pd-120 {
+        padding: 120px;
+    }
+
+    .px-120 {
+        padding-inline: 120px;
+    }
+
+    .py-120 {
+        padding-block: 120px;
+    }
+
+    .pl-120 {
+        padding-left: 120px;
+    }
+
+    .pr-120 {
+        padding-right: 120px;
+    }
+
+    .pt-120 {
+        padding-top: 120px;
+    }
+
+    .pb-120 {
+        padding-bottom: 120px;
+    }
+
+    .gap-120 {
+        gap: 120px;
+    }
+
+    .mg-160 {
+        margin: 160px;
+    }
+
+    .mx-160 {
+        margin-inline: 160px;
+    }
+
+    .my-160 {
+        margin-block: 160px;
+    }
+
+    .mt-160 {
+        margin-top: 160px;
+    }
+
+    .mb-160 {
+        margin-bottom: 160px;
+    }
+
+    .ml-160 {
+        margin-left: 160px;
+    }
+
+    .mr-160 {
+        margin-right: 160px;
+    }
+
+    .pd-160 {
+        padding: 160px;
+    }
+
+    .px-160 {
+        padding-inline: 160px;
+    }
+
+    .py-160 {
+        padding-block: 160px;
+    }
+
+    .pl-160 {
+        padding-left: 160px;
+    }
+
+    .pr-160 {
+        padding-right: 160px;
+    }
+
+    .pt-160 {
+        padding-top: 160px;
+    }
+
+    .pb-160 {
+        padding-bottom: 160px;
+    }
+
+    .gap-160 {
+        gap: 160px;
+    }
+
+    .mg-200 {
+        margin: 200px;
+    }
+
+    .mx-200 {
+        margin-inline: 200px;
+    }
+
+    .my-200 {
+        margin-block: 200px;
+    }
+
+    .mt-200 {
+        margin-top: 200px;
+    }
+
+    .mb-200 {
+        margin-bottom: 200px;
+    }
+
+    .ml-200 {
+        margin-left: 200px;
+    }
+
+    .mr-200 {
+        margin-right: 200px;
+    }
+
+    .pd-200 {
+        padding: 200px;
+    }
+
+    .px-200 {
+        padding-inline: 200px;
+    }
+
+    .py-200 {
+        padding-block: 200px;
+    }
+
+    .pl-200 {
+        padding-left: 200px;
+    }
+
+    .pr-200 {
+        padding-right: 200px;
+    }
+
+    .pt-200 {
+        padding-top: 200px;
+    }
+
+    .pb-200 {
+        padding-bottom: 200px;
+    }
+
+    .gap-200 {
+        gap: 200px;
+    }
+
+    .w-10 {
+        width: 10%;
+    }
+
+    .w-20 {
+        width: 20%;
+    }
+
+    .w-25 {
+        width: 25%;
+    }
+
+    .w-30 {
+        width: 30%;
+    }
+
+    .w-40 {
+        width: 40%;
+    }
+
+    .w-50 {
+        width: 50%;
+    }
+
+    .w-60 {
+        width: 60%;
+    }
+
+    .w-70 {
+        width: 70%;
+    }
+
+    .w-75 {
+        width: 75%;
+    }
+
+    .w-80 {
+        width: 80%;
+    }
+
+    .w-90 {
+        width: 90%;
+    }
+
+    .w-100 {
+        width: 100%;
+    }
+
+    .h-10 {
+        height: 10%;
+    }
+
+    .h-20 {
+        height: 20%;
+    }
+
+    .h-25 {
+        height: 25%;
+    }
+
+    .h-30 {
+        height: 30%;
+    }
+
+    .h-40 {
+        height: 40%;
+    }
+
+    .h-50 {
+        height: 50%;
+    }
+
+    .h-60 {
+        height: 60%;
+    }
+
+    .h-70 {
+        height: 70%;
+    }
+
+    .h-75 {
+        height: 75%;
+    }
+
+    .h-80 {
+        height: 80%;
+    }
+
+    .h-90 {
+        height: 90%;
+    }
+
+    .h-100 {
+        height: 100%;
+    }
+
+    .colspan-2 {
+        grid-column: span 2;
+    }
+
+    .colspan-3 {
+        grid-column: span 3;
+    }
+
+    .colspan-4 {
+        grid-column: span 4;
+    }
+
+    .colspan-5 {
+        grid-column: span 5;
+    }
+
+    .rowspan-2 {
+        grid-row: span 2;
+    }
+
+    .rowspan-3 {
+        grid-row: span 3;
+    }
+
+    .rowspan-4 {
+        grid-row: span 4;
+    }
+
+    .rowspan-5 {
+        grid-row: span 5;
+    }
+
+    .colspan-full {
+        grid-column: 1 / -1;
+    }
+
+    .rowspan-full {
+        grid-row: 1 / -1;
+    }
+
+}
+
+@media (min-width: 880px) {
+    .screen-sm {
+        display: none !important;
+    }
+}
+
+@media (max-width: 880px) {
+    .screen-lg {
+        display: none !important;
+    }
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes bounce {
+    20% {
+        transform: translate(12px, 0);
+    }
+
+    50% {
+        transform: translate(-8px, 0);
+    }
+
+    80% {
+        transform: translate(6px, 0);
+    }
+}