@ioca/react 1.5.19 → 1.5.21

package/lib/css/utilities.css

@@ -1,1973 +0,0 @@
-.kbd,
-.code {
-    display: inline-flex;
-    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;
-    align-items: center;
-}
-
-.code {
-    border: 1px solid var(--color-8);
-    background: var(--color-9);
-    color: var(--color-0);
-    font-family: unset;
-}
-
-.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 {
-    display: inline-flex;
-    align-items: center;
-    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 !important;
-    }
-
-    .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);
-    }
-}