@shohojdhara/atomix 0.2.3 → 0.2.4

package/dist/atomix.css

@@ -1726,6 +1726,61 @@ a, a:hover {
   margin-left: calc(var(--atomix-avatar-size) * -1 * var(--atomix-avatar-group-stacked-overlap) / 100);
   z-index: 1;
 }
+.atomix-glass__layer, .atomix-glass__overlay, .atomix-glass__base, .atomix-glass__border-1, .atomix-glass__border-2 {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  transform: inherit;
+  transition: inherit;
+}
+.atomix-glass__border-1, .atomix-glass__border-2 {
+  box-sizing: border-box;
+  padding: 1.5px;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35);
+  transition-property: transform;
+}
+.atomix-glass__border-1 {
+  z-index: 5;
+  opacity: 0.3;
+  mix-blend-mode: screen;
+}
+.atomix-glass__border-2 {
+  z-index: 6;
+}
+.atomix-glass__hover-1, .atomix-glass__hover-2, .atomix-glass__hover-3 {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  transform: inherit;
+  transition: inherit;
+  transition-property: transform, opacity;
+}
+.atomix-glass__hover-1 {
+  opacity: 0;
+}
+.atomix-glass__hover-2 {
+  overflow: hidden;
+  opacity: 0;
+}
+.atomix-glass__hover-3 {
+  opacity: 0;
+}
+.atomix-glass__base {
+  will-change: transform;
+  transition-property: transform, opacity;
+  opacity: 0;
+}
+.atomix-glass__overlay {
+  mix-blend-mode: overlay;
+  will-change: transform;
+  transition-property: transform, opacity;
+  opacity: 0;
+}
 .c-badge {
   --atomix-tag-font-size: 0.75rem;
   --atomix-tag-font-weight: 400;
@@ -1762,8 +1817,8 @@ a, a:hover {
   --atomix-tag-padding-y: 0.5rem;
 }
 .c-badge--glass {
-  background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 80%, transparent);
-  border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 20%, transparent);
+  background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 20%, transparent);
+  border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 90%, transparent);
 }
 .c-badge--primary {
   --atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
@@ -1799,10 +1854,6 @@ a, a:hover {
   --atomix-tag-color: var(--atomix-light);
   border: 1px solid var(--atomix-dark);
 }
-.c-badge-glass {
-  box-shadow: inset 1px 2px 3px rgba(255, 255, 255, 0.1), inset 0 -2px 2px rgba(0, 0, 0, 0.3);
-  border-radius: 999px;
-}
 .c-breadcrumb {
   --atomix-breadcrumb-font-size: 0.875rem;
   --atomix-breadcrumb-link-padding-y: 0.25rem;
@@ -5130,7 +5181,7 @@ a, a:hover {
   --atomix-edge-panel-bg: var(--atomix-body-bg);
   --atomix-edge-panel-color: var(--atomix-body-color);
   --atomix-edge-panel-shadow: var(--atomix-box-shadow);
-  --atomix-edge-panel-backdrop-bg: var(--atomix-invert-bg-subtle);
+  --atomix-edge-panel-backdrop-bg: var(--atomix-dark-bg-subtle);
   --atomix-edge-panel-backdrop-opacity: 0.5;
   --atomix-edge-panel-backdrop-blur: 10px;
   --atomix-edge-panel-animation-duration: 300ms;
@@ -5384,6 +5435,89 @@ a, a:hover {
     transform: translateY(100%);
   }
 }
+.c-edge-panel--glass {
+  position: absolute;
+  z-index: auto;
+  z-index: initial;
+}
+.c-edge-panel--glass .c-edge-panel__container {
+  background: transparent;
+  box-shadow: none;
+  overflow: hidden;
+  border: none;
+  padding: 0;
+  z-index: auto;
+  z-index: initial;
+  will-change: initial;
+  transform: none !important;
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.c-edge-panel--glass .c-edge-panel__glass-content {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  padding: 0;
+  border-radius: inherit;
+  transition: opacity 0.3s ease;
+}
+.c-edge-panel--glass .c-edge-panel__header {
+  background: transparent;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  flex-shrink: 0;
+  padding: var(--atomix-edge-panel-padding-y) var(--atomix-edge-panel-padding-x);
+}
+.c-edge-panel--glass .c-edge-panel__body {
+  background: transparent;
+  flex: 1 1;
+  overflow-y: auto;
+  padding: var(--atomix-edge-panel-padding-y) var(--atomix-edge-panel-padding-x);
+}
+.c-edge-panel--glass .c-edge-panel__close {
+  background: rgba(255, 255, 255, 0.05);
+}
+.c-edge-panel--glass .c-edge-panel__close:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+.c-edge-panel--glass .c-edge-panel__close:focus-visible {
+  outline-color: rgba(255, 255, 255, 0.5);
+}
+.c-edge-panel--glass .c-edge-panel__backdrop {
+  animation: fadeIn 0.3s ease forwards;
+  z-index: 0;
+}
+.c-edge-panel--glass .c-edge-panel__backdrop.is-animating-out {
+  animation: fadeOut 0.3s ease forwards;
+}
+.c-edge-panel--glass.c-edge-panel--start .c-edge-panel__glass-wrapper {
+  animation: slideInStart 0.3s ease forwards;
+}
+.c-edge-panel--glass.c-edge-panel--start .c-edge-panel__glass-wrapper.is-animating-out {
+  animation: slideOutStart 0.3s ease forwards;
+}
+.c-edge-panel--glass.c-edge-panel--end .c-edge-panel__glass-wrapper {
+  animation: slideInEnd 0.3s ease forwards;
+}
+.c-edge-panel--glass.c-edge-panel--end .c-edge-panel__glass-wrapper.is-animating-out {
+  animation: slideOutEnd 0.3s ease forwards;
+}
+.c-edge-panel--glass.c-edge-panel--top .c-edge-panel__glass-wrapper {
+  animation: slideInTop 0.3s ease forwards;
+}
+.c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__glass-wrapper {
+  animation: slideInBottom 0.3s ease forwards;
+}
+.c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__container, .c-edge-panel--glass.c-edge-panel--top .c-edge-panel__container {
+  width: 100vw;
+  height: auto;
+}
+.c-edge-panel--glass.c-edge-panel--bottom .c-edge-panel__glass-content, .c-edge-panel--glass.c-edge-panel--top .c-edge-panel__glass-content {
+  width: 100vw;
+  height: auto;
+}
 .c-footer {
   --atomix-footer-padding-x: 1rem;
   --atomix-footer-padding-y: 3rem;
@@ -7218,6 +7352,134 @@ a, a:hover {
   opacity: 0.5;
   cursor: not-allowed;
 }
+.c-messages--glass {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+.c-messages--glass .c-messages__glass-content {
+  padding: var(--atomix-messages-padding-y) var(--atomix-messages-padding-x);
+  border-radius: var(--atomix-messages-border-radius);
+}
+.c-messages--glass .c-messages__body {
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  background-color: color-mix(in srgb, var(--atomix-body-bg) 15%, transparent);
+}
+.c-messages--glass .c-messages__text {
+  background-color: color-mix(in srgb, var(--atomix-body-bg) 50%, transparent);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+.c-messages--glass .c-messages__content--self .c-messages__text {
+  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
+  border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+}
+.c-messages--glass .c-messages__content--self .c-messages__file {
+  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
+  border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+}
+.c-messages--glass .c-messages__file {
+  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
+  border: 1px solid rgba(var(--atomix-primary-rgb), 0.3);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+.c-messages--glass .c-messages__file-icon {
+  background-color: color-mix(in srgb, var(--atomix-brand-bg-subtle) 50%, transparent);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+.c-messages--glass .c-messages__image {
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.c-messages--glass .c-messages__avatar {
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+.c-messages--glass .c-messages__name {
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  font-weight: 600;
+}
+.c-messages--glass .c-messages__time {
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.c-messages--glass .c-messages__form {
+  padding-top: 0.75rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  margin-top: 1rem;
+}
+.c-messages--glass .c-messages__input {
+  background: rgba(255, 255, 255, 0.3);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  color: var(--atomix-primary-text-emphasis);
+}
+.c-messages--glass .c-messages__input:focus {
+  background: rgba(255, 255, 255, 0.45);
+  border-color: var(--atomix-primary);
+  box-shadow: 0 0 0 3px rgba(var(--atomix-primary-rgb), 0.15);
+}
+.c-messages--glass .c-messages__input::-moz-placeholder {
+  opacity: 0.8;
+  color: var(--atomix-primary-text-emphasis);
+}
+.c-messages--glass .c-messages__input::placeholder {
+  opacity: 0.8;
+  color: var(--atomix-primary-text-emphasis);
+}
+.c-messages--glass .c-messages__option {
+  padding: 0.375rem;
+  border-radius: 0.25rem;
+  transition: background-color 0.2s ease;
+}
+.c-messages--glass .c-messages__option:hover:not(:disabled) {
+  background: rgba(var(--atomix-secondary-bg-rgb), 0.4);
+}
+.c-messages--glass .c-messages__option:focus-visible {
+  outline: 2px solid var(--atomix-primary);
+  outline-offset: 2px;
+}
+.c-messages--glass .c-messages__option-icon {
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+.c-messages__option:hover .c-messages--glass .c-messages__option-icon {
+  opacity: 1;
+}
+.c-messages--glass .c-messages__submit {
+  background: rgba(var(--atomix-primary-rgb), 0.9);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+  border: 1px solid rgba(var(--atomix-primary-rgb), 0.4);
+  box-shadow: 0 2px 8px rgba(var(--atomix-primary-rgb), 0.3);
+  transition: all 0.2s ease;
+}
+.c-messages--glass .c-messages__submit:hover:not(:disabled) {
+  background: rgba(var(--atomix-primary-rgb), 1);
+  box-shadow: 0 4px 12px rgba(var(--atomix-primary-rgb), 0.4);
+  transform: translateY(-1px);
+}
+.c-messages--glass .c-messages__submit:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 1px 4px rgba(var(--atomix-primary-rgb), 0.3);
+}
+.c-messages--glass .c-messages__submit:disabled {
+  opacity: 0.5;
+  background: rgba(var(--atomix-primary-rgb), 0.5);
+}
 .c-modal {
   --atomix-modal-inner-padding: 1rem;
   --atomix-modal-content-color: ;
@@ -7240,7 +7502,7 @@ a, a:hover {
   --atomix-modal-lg: 62.5rem;
   --atomix-modal-xl: 71.25rem;
   --atomix-modal-width: var(--atomix-modal-md);
-  position: fixed;
+  position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
@@ -7264,10 +7526,8 @@ a, a:hover {
   margin-left: auto;
   margin-right: auto;
   opacity: 0;
-  z-index: 2;
   pointer-events: none;
   transition: 0.3s ease;
-  will-change: transform;
 }
 .c-modal__content {
   display: flex;
@@ -7331,6 +7591,9 @@ a, a:hover {
 .c-modal--xl {
   --atomix-modal-width: var(--atomix-modal-xl);
 }
+.c-modal--glass .c-modal .c-modal--glass .c-modal__content {
+  background-color: color-mix(in srgb, var(--atomix-modal-content-bg) 50%, transparent);
+}
 .c-modal.is-open .c-modal__backdrop {
   opacity: var(--atomix-modal-backdrop-opacity);
 }
@@ -7653,8 +7916,10 @@ a, a:hover {
     display: flex !important;
   }
 }
-.c-navbar--fixed, .c-navbar--fixed-bottom {
+.c-navbar--fixed:not(.c-navbar--glass), .c-navbar--fixed-bottom:not(.c-navbar--glass) {
   position: fixed;
+}
+.c-navbar--fixed, .c-navbar--fixed-bottom {
   left: 0;
   right: 0;
   width: 100%;
@@ -7663,12 +7928,18 @@ a, a:hover {
 .c-navbar--fixed {
   top: 0;
 }
+.c-navbar--glass {
+  position: relative;
+  background-color: transparent;
+  border-bottom: none;
+}
 .c-navbar--fixed-bottom {
   bottom: 0;
 }
 .c-navbar--fixed-bottom .c-nav__dropdown-menu {
   top: auto;
   bottom: 100%;
+  z-index: 999;
 }
 .c-navbar--fixed-bottom .c-nav--end .c-nav__dropdown-menu {
   left: 50%;
@@ -8009,7 +8280,7 @@ a, a:hover {
   --atomix-callout-icon-color: var(--atomix-light);
 }
 .c-callout--glass {
-  background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
+  background: none;
   padding: 0;
   border: none;
   display: block;
@@ -8019,10 +8290,11 @@ a, a:hover {
   justify-content: center;
   align-items: center;
   padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
-  border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
+  border: var(--atomix-callout-border-witdh) solid color-mix(in srgb, var(--atomix-callout-border-color) 20%, transparent);
   max-width: var(--atomix-callout-width);
   border-radius: var(--atomix-callout-border-radius);
   width: 100%;
+  background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
 }
 .c-callout--glass .c-callout__title {
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -9197,6 +9469,10 @@ a, a:hover {
 .c-side-menu__link-text {
   flex: 1 1;
 }
+.c-side-menu--glass {
+  background-color: transparent;
+  border-bottom: none;
+}
 .c-side-menu.is-open .c-side-menu__toggler-icon {
   transform: rotate(90deg);
 }
@@ -11613,6 +11889,35 @@ body.is-open-photoviewer {
   display: block !important;
   clear: both !important;
 }
+.u-glass-clean-root {
+  isolation: initial !important;
+  contain: none !important;
+  transform-style: flat !important;
+  will-change: auto !important;
+  transform: none !important;
+  z-index: auto;
+  z-index: initial;
+}
+.u-glass-debug {
+  outline: 2px dashed red !important;
+}
+.u-glass-debug::after {
+  content: "Glass Debug";
+  position: absolute;
+  top: -20px;
+  left: 0;
+  background: red;
+  color: white;
+  font-size: 10px;
+  padding: 2px 4px;
+  z-index: 9999;
+}
+@media (prefers-reduced-motion: reduce) {
+  .u-glass-no-motion {
+    transition: none !important;
+    animation: none !important;
+  }
+}
 .u-link-primary {
   color: RGBA(var(--atomix-primary-rgb), var(--atomix-u-link-opacity, 1)) !important;
   text-decoration-color: RGBA(var(--atomix-primary-rgb), var(--atomix-u-link-underline-opacity, 1)) !important;
@@ -11863,19 +12168,19 @@ body.is-open-photoviewer {
   border-width: 5px;
 }
 .u-border-opacity-10 {
-  : 0.1;
+  --atomix-u-u-border-opacity-10: 0.1;
 }
 .u-border-opacity-25 {
-  : 0.25;
+  --atomix-u-u-border-opacity-25: 0.25;
 }
 .u-border-opacity-50 {
-  : 0.5;
+  --atomix-u-u-border-opacity-50: 0.5;
 }
 .u-border-opacity-75 {
-  : 0.75;
+  --atomix-u-u-border-opacity-75: 0.75;
 }
 .u-border-opacity-100 {
-  : 1;
+  --atomix-u-u-border-opacity-100: 1;
 }
 .u-rounded {
   border-radius: var(--atomix-border-radius);
@@ -12211,27 +12516,27 @@ body.is-open-photoviewer {
   order: 6;
 }
 .u-link-opacityhover-10 {
-  : 0.1;
+  --atomix-u-u-link-opacity-10: 0.1;
 }
-.u-link-opacityhoverhover-25 {
-  : 0.25;
+.u-link-opacityhover-25 {
+  --atomix-u-u-link-opacity-25: 0.25;
 }
-.u-link-opacityhoverhoverhover-50 {
-  : 0.5;
+.u-link-opacityhover-50 {
+  --atomix-u-u-link-opacity-50: 0.5;
 }
-.u-link-opacityhoverhoverhoverhover-75 {
-  : 0.75;
+.u-link-opacityhover-75 {
+  --atomix-u-u-link-opacity-75: 0.75;
 }
-.u-link-opacityhoverhoverhoverhoverhover-100 {
-  : 1;
+.u-link-opacityhover-100 {
+  --atomix-u-u-link-opacity-100: 1;
 }
 .u-link-offsethover-1 {
   text-underline-offset: 0.125em;
 }
-.u-link-offsethoverhover-2 {
+.u-link-offsethover-2 {
   text-underline-offset: 0.25em;
 }
-.u-link-offsethoverhoverhover-3 {
+.u-link-offsethover-3 {
   text-underline-offset: 0.375em;
 }
 .u-link-underline-primary {
@@ -12268,22 +12573,22 @@ body.is-open-photoviewer {
   text-decoration-color: rgba(var(--atomix-link-color-rgb), var(--atomix-u-link-underline-opacity, 1));
 }
 .u-link-underline-opacityhover-0 {
-  : 0;
+  --atomix-u-u-link-underline-opacity-0: 0;
 }
-.u-link-underline-opacityhoverhover-10 {
-  : 0.1;
+.u-link-underline-opacityhover-10 {
+  --atomix-u-u-link-underline-opacity-10: 0.1;
 }
-.u-link-underline-opacityhoverhoverhover-25 {
-  : 0.25;
+.u-link-underline-opacityhover-25 {
+  --atomix-u-u-link-underline-opacity-25: 0.25;
 }
-.u-link-underline-opacityhoverhoverhoverhover-50 {
-  : 0.5;
+.u-link-underline-opacityhover-50 {
+  --atomix-u-u-link-underline-opacity-50: 0.5;
 }
-.u-link-underline-opacityhoverhoverhoverhoverhover-75 {
-  : 0.75;
+.u-link-underline-opacityhover-75 {
+  --atomix-u-u-link-underline-opacity-75: 0.75;
 }
-.u-link-underline-opacityhoverhoverhoverhoverhoverhover-100 {
-  : 1;
+.u-link-underline-opacityhover-100 {
+  --atomix-u-u-link-underline-opacity-100: 1;
 }
 .u-object-fit-contain {
   -o-object-fit: contain;
@@ -12527,19 +12832,19 @@ body.is-open-photoviewer {
 .u-m-1 {
   margin: 0.25rem;
 }
-.u-m-2 {
+.u-m-1\.5 {
   margin: 0.375rem;
 }
 .u-m-2 {
   margin: 0.5rem;
 }
-.u-m-3 {
+.u-m-2\.5 {
   margin: 0.625rem;
 }
 .u-m-3 {
   margin: 0.75rem;
 }
-.u-m-4 {
+.u-m-3\.5 {
   margin: 0.875rem;
 }
 .u-m-4 {
@@ -12548,7 +12853,7 @@ body.is-open-photoviewer {
 .u-m-5 {
   margin: 1.25rem;
 }
-.u-m-6 {
+.u-m-5\.5 {
   margin: 1.375rem;
 }
 .u-m-6 {
@@ -12557,7 +12862,7 @@ body.is-open-photoviewer {
 .u-m-7 {
   margin: 1.75rem;
 }
-.u-m-8 {
+.u-m-7\.5 {
   margin: 1.875rem;
 }
 .u-m-8 {
@@ -12640,7 +12945,7 @@ body.is-open-photoviewer {
   margin-right: 0.25rem;
   margin-left: 0.25rem;
 }
-.u-mx-2 {
+.u-mx-1\.5 {
   margin-right: 0.375rem;
   margin-left: 0.375rem;
 }
@@ -12648,7 +12953,7 @@ body.is-open-photoviewer {
   margin-right: 0.5rem;
   margin-left: 0.5rem;
 }
-.u-mx-3 {
+.u-mx-2\.5 {
   margin-right: 0.625rem;
   margin-left: 0.625rem;
 }
@@ -12656,7 +12961,7 @@ body.is-open-photoviewer {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
-.u-mx-4 {
+.u-mx-3\.5 {
   margin-right: 0.875rem;
   margin-left: 0.875rem;
 }
@@ -12668,7 +12973,7 @@ body.is-open-photoviewer {
   margin-right: 1.25rem;
   margin-left: 1.25rem;
 }
-.u-mx-6 {
+.u-mx-5\.5 {
   margin-right: 1.375rem;
   margin-left: 1.375rem;
 }
@@ -12680,7 +12985,7 @@ body.is-open-photoviewer {
   margin-right: 1.75rem;
   margin-left: 1.75rem;
 }
-.u-mx-8 {
+.u-mx-7\.5 {
   margin-right: 1.875rem;
   margin-left: 1.875rem;
 }
@@ -12788,7 +13093,7 @@ body.is-open-photoviewer {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
-.u-my-2 {
+.u-my-1\.5 {
   margin-top: 0.375rem;
   margin-bottom: 0.375rem;
 }
@@ -12796,7 +13101,7 @@ body.is-open-photoviewer {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.u-my-3 {
+.u-my-2\.5 {
   margin-top: 0.625rem;
   margin-bottom: 0.625rem;
 }
@@ -12804,7 +13109,7 @@ body.is-open-photoviewer {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
 }
-.u-my-4 {
+.u-my-3\.5 {
   margin-top: 0.875rem;
   margin-bottom: 0.875rem;
 }
@@ -12816,7 +13121,7 @@ body.is-open-photoviewer {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 }
-.u-my-6 {
+.u-my-5\.5 {
   margin-top: 1.375rem;
   margin-bottom: 1.375rem;
 }
@@ -12828,7 +13133,7 @@ body.is-open-photoviewer {
   margin-top: 1.75rem;
   margin-bottom: 1.75rem;
 }
-.u-my-8 {
+.u-my-7\.5 {
   margin-top: 1.875rem;
   margin-bottom: 1.875rem;
 }
@@ -12934,19 +13239,19 @@ body.is-open-photoviewer {
 .u-mt-1 {
   margin-top: 0.25rem;
 }
-.u-mt-2 {
+.u-mt-1\.5 {
   margin-top: 0.375rem;
 }
 .u-mt-2 {
   margin-top: 0.5rem;
 }
-.u-mt-3 {
+.u-mt-2\.5 {
   margin-top: 0.625rem;
 }
 .u-mt-3 {
   margin-top: 0.75rem;
 }
-.u-mt-4 {
+.u-mt-3\.5 {
   margin-top: 0.875rem;
 }
 .u-mt-4 {
@@ -12955,7 +13260,7 @@ body.is-open-photoviewer {
 .u-mt-5 {
   margin-top: 1.25rem;
 }
-.u-mt-6 {
+.u-mt-5\.5 {
   margin-top: 1.375rem;
 }
 .u-mt-6 {
@@ -12964,7 +13269,7 @@ body.is-open-photoviewer {
 .u-mt-7 {
   margin-top: 1.75rem;
 }
-.u-mt-8 {
+.u-mt-7\.5 {
   margin-top: 1.875rem;
 }
 .u-mt-8 {
@@ -13045,19 +13350,19 @@ body.is-open-photoviewer {
 .u-me-1 {
   margin-right: 0.25rem;
 }
-.u-me-2 {
+.u-me-1\.5 {
   margin-right: 0.375rem;
 }
 .u-me-2 {
   margin-right: 0.5rem;
 }
-.u-me-3 {
+.u-me-2\.5 {
   margin-right: 0.625rem;
 }
 .u-me-3 {
   margin-right: 0.75rem;
 }
-.u-me-4 {
+.u-me-3\.5 {
   margin-right: 0.875rem;
 }
 .u-me-4 {
@@ -13066,7 +13371,7 @@ body.is-open-photoviewer {
 .u-me-5 {
   margin-right: 1.25rem;
 }
-.u-me-6 {
+.u-me-5\.5 {
   margin-right: 1.375rem;
 }
 .u-me-6 {
@@ -13075,7 +13380,7 @@ body.is-open-photoviewer {
 .u-me-7 {
   margin-right: 1.75rem;
 }
-.u-me-8 {
+.u-me-7\.5 {
   margin-right: 1.875rem;
 }
 .u-me-8 {
@@ -13156,19 +13461,19 @@ body.is-open-photoviewer {
 .u-mb-1 {
   margin-bottom: 0.25rem;
 }
-.u-mb-2 {
+.u-mb-1\.5 {
   margin-bottom: 0.375rem;
 }
 .u-mb-2 {
   margin-bottom: 0.5rem;
 }
-.u-mb-3 {
+.u-mb-2\.5 {
   margin-bottom: 0.625rem;
 }
 .u-mb-3 {
   margin-bottom: 0.75rem;
 }
-.u-mb-4 {
+.u-mb-3\.5 {
   margin-bottom: 0.875rem;
 }
 .u-mb-4 {
@@ -13177,7 +13482,7 @@ body.is-open-photoviewer {
 .u-mb-5 {
   margin-bottom: 1.25rem;
 }
-.u-mb-6 {
+.u-mb-5\.5 {
   margin-bottom: 1.375rem;
 }
 .u-mb-6 {
@@ -13186,7 +13491,7 @@ body.is-open-photoviewer {
 .u-mb-7 {
   margin-bottom: 1.75rem;
 }
-.u-mb-8 {
+.u-mb-7\.5 {
   margin-bottom: 1.875rem;
 }
 .u-mb-8 {
@@ -13267,19 +13572,19 @@ body.is-open-photoviewer {
 .u-ms-1 {
   margin-left: 0.25rem;
 }
-.u-ms-2 {
+.u-ms-1\.5 {
   margin-left: 0.375rem;
 }
 .u-ms-2 {
   margin-left: 0.5rem;
 }
-.u-ms-3 {
+.u-ms-2\.5 {
   margin-left: 0.625rem;
 }
 .u-ms-3 {
   margin-left: 0.75rem;
 }
-.u-ms-4 {
+.u-ms-3\.5 {
   margin-left: 0.875rem;
 }
 .u-ms-4 {
@@ -13288,7 +13593,7 @@ body.is-open-photoviewer {
 .u-ms-5 {
   margin-left: 1.25rem;
 }
-.u-ms-6 {
+.u-ms-5\.5 {
   margin-left: 1.375rem;
 }
 .u-ms-6 {
@@ -13297,7 +13602,7 @@ body.is-open-photoviewer {
 .u-ms-7 {
   margin-left: 1.75rem;
 }
-.u-ms-8 {
+.u-ms-7\.5 {
   margin-left: 1.875rem;
 }
 .u-ms-8 {
@@ -13378,19 +13683,19 @@ body.is-open-photoviewer {
 .u-p-1 {
   padding: 0.25rem;
 }
-.u-p-2 {
+.u-p-1\.5 {
   padding: 0.375rem;
 }
 .u-p-2 {
   padding: 0.5rem;
 }
-.u-p-3 {
+.u-p-2\.5 {
   padding: 0.625rem;
 }
 .u-p-3 {
   padding: 0.75rem;
 }
-.u-p-4 {
+.u-p-3\.5 {
   padding: 0.875rem;
 }
 .u-p-4 {
@@ -13399,7 +13704,7 @@ body.is-open-photoviewer {
 .u-p-5 {
   padding: 1.25rem;
 }
-.u-p-6 {
+.u-p-5\.5 {
   padding: 1.375rem;
 }
 .u-p-6 {
@@ -13408,7 +13713,7 @@ body.is-open-photoviewer {
 .u-p-7 {
   padding: 1.75rem;
 }
-.u-p-8 {
+.u-p-7\.5 {
   padding: 1.875rem;
 }
 .u-p-8 {
@@ -13488,7 +13793,7 @@ body.is-open-photoviewer {
   padding-right: 0.25rem;
   padding-left: 0.25rem;
 }
-.u-px-2 {
+.u-px-1\.5 {
   padding-right: 0.375rem;
   padding-left: 0.375rem;
 }
@@ -13496,7 +13801,7 @@ body.is-open-photoviewer {
   padding-right: 0.5rem;
   padding-left: 0.5rem;
 }
-.u-px-3 {
+.u-px-2\.5 {
   padding-right: 0.625rem;
   padding-left: 0.625rem;
 }
@@ -13504,7 +13809,7 @@ body.is-open-photoviewer {
   padding-right: 0.75rem;
   padding-left: 0.75rem;
 }
-.u-px-4 {
+.u-px-3\.5 {
   padding-right: 0.875rem;
   padding-left: 0.875rem;
 }
@@ -13516,7 +13821,7 @@ body.is-open-photoviewer {
   padding-right: 1.25rem;
   padding-left: 1.25rem;
 }
-.u-px-6 {
+.u-px-5\.5 {
   padding-right: 1.375rem;
   padding-left: 1.375rem;
 }
@@ -13528,7 +13833,7 @@ body.is-open-photoviewer {
   padding-right: 1.75rem;
   padding-left: 1.75rem;
 }
-.u-px-8 {
+.u-px-7\.5 {
   padding-right: 1.875rem;
   padding-left: 1.875rem;
 }
@@ -13632,7 +13937,7 @@ body.is-open-photoviewer {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-.u-py-2 {
+.u-py-1\.5 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
@@ -13640,7 +13945,7 @@ body.is-open-photoviewer {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.u-py-3 {
+.u-py-2\.5 {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
@@ -13648,7 +13953,7 @@ body.is-open-photoviewer {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.u-py-4 {
+.u-py-3\.5 {
   padding-top: 0.875rem;
   padding-bottom: 0.875rem;
 }
@@ -13660,7 +13965,7 @@ body.is-open-photoviewer {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
-.u-py-6 {
+.u-py-5\.5 {
   padding-top: 1.375rem;
   padding-bottom: 1.375rem;
 }
@@ -13672,7 +13977,7 @@ body.is-open-photoviewer {
   padding-top: 1.75rem;
   padding-bottom: 1.75rem;
 }
-.u-py-8 {
+.u-py-7\.5 {
   padding-top: 1.875rem;
   padding-bottom: 1.875rem;
 }
@@ -13774,19 +14079,19 @@ body.is-open-photoviewer {
 .u-pt-1 {
   padding-top: 0.25rem;
 }
-.u-pt-2 {
+.u-pt-1\.5 {
   padding-top: 0.375rem;
 }
 .u-pt-2 {
   padding-top: 0.5rem;
 }
-.u-pt-3 {
+.u-pt-2\.5 {
   padding-top: 0.625rem;
 }
 .u-pt-3 {
   padding-top: 0.75rem;
 }
-.u-pt-4 {
+.u-pt-3\.5 {
   padding-top: 0.875rem;
 }
 .u-pt-4 {
@@ -13795,7 +14100,7 @@ body.is-open-photoviewer {
 .u-pt-5 {
   padding-top: 1.25rem;
 }
-.u-pt-6 {
+.u-pt-5\.5 {
   padding-top: 1.375rem;
 }
 .u-pt-6 {
@@ -13804,7 +14109,7 @@ body.is-open-photoviewer {
 .u-pt-7 {
   padding-top: 1.75rem;
 }
-.u-pt-8 {
+.u-pt-7\.5 {
   padding-top: 1.875rem;
 }
 .u-pt-8 {
@@ -13882,19 +14187,19 @@ body.is-open-photoviewer {
 .u-pe-1 {
   padding-right: 0.25rem;
 }
-.u-pe-2 {
+.u-pe-1\.5 {
   padding-right: 0.375rem;
 }
 .u-pe-2 {
   padding-right: 0.5rem;
 }
-.u-pe-3 {
+.u-pe-2\.5 {
   padding-right: 0.625rem;
 }
 .u-pe-3 {
   padding-right: 0.75rem;
 }
-.u-pe-4 {
+.u-pe-3\.5 {
   padding-right: 0.875rem;
 }
 .u-pe-4 {
@@ -13903,7 +14208,7 @@ body.is-open-photoviewer {
 .u-pe-5 {
   padding-right: 1.25rem;
 }
-.u-pe-6 {
+.u-pe-5\.5 {
   padding-right: 1.375rem;
 }
 .u-pe-6 {
@@ -13912,7 +14217,7 @@ body.is-open-photoviewer {
 .u-pe-7 {
   padding-right: 1.75rem;
 }
-.u-pe-8 {
+.u-pe-7\.5 {
   padding-right: 1.875rem;
 }
 .u-pe-8 {
@@ -13990,19 +14295,19 @@ body.is-open-photoviewer {
 .u-pb-1 {
   padding-bottom: 0.25rem;
 }
-.u-pb-2 {
+.u-pb-1\.5 {
   padding-bottom: 0.375rem;
 }
 .u-pb-2 {
   padding-bottom: 0.5rem;
 }
-.u-pb-3 {
+.u-pb-2\.5 {
   padding-bottom: 0.625rem;
 }
 .u-pb-3 {
   padding-bottom: 0.75rem;
 }
-.u-pb-4 {
+.u-pb-3\.5 {
   padding-bottom: 0.875rem;
 }
 .u-pb-4 {
@@ -14011,7 +14316,7 @@ body.is-open-photoviewer {
 .u-pb-5 {
   padding-bottom: 1.25rem;
 }
-.u-pb-6 {
+.u-pb-5\.5 {
   padding-bottom: 1.375rem;
 }
 .u-pb-6 {
@@ -14020,7 +14325,7 @@ body.is-open-photoviewer {
 .u-pb-7 {
   padding-bottom: 1.75rem;
 }
-.u-pb-8 {
+.u-pb-7\.5 {
   padding-bottom: 1.875rem;
 }
 .u-pb-8 {
@@ -14098,19 +14403,19 @@ body.is-open-photoviewer {
 .u-ps-1 {
   padding-left: 0.25rem;
 }
-.u-ps-2 {
+.u-ps-1\.5 {
   padding-left: 0.375rem;
 }
 .u-ps-2 {
   padding-left: 0.5rem;
 }
-.u-ps-3 {
+.u-ps-2\.5 {
   padding-left: 0.625rem;
 }
 .u-ps-3 {
   padding-left: 0.75rem;
 }
-.u-ps-4 {
+.u-ps-3\.5 {
   padding-left: 0.875rem;
 }
 .u-ps-4 {
@@ -14119,7 +14424,7 @@ body.is-open-photoviewer {
 .u-ps-5 {
   padding-left: 1.25rem;
 }
-.u-ps-6 {
+.u-ps-5\.5 {
   padding-left: 1.375rem;
 }
 .u-ps-6 {
@@ -14128,7 +14433,7 @@ body.is-open-photoviewer {
 .u-ps-7 {
   padding-left: 1.75rem;
 }
-.u-ps-8 {
+.u-ps-7\.5 {
   padding-left: 1.875rem;
 }
 .u-ps-8 {
@@ -14206,19 +14511,19 @@ body.is-open-photoviewer {
 .u-gap-1 {
   gap: 0.25rem;
 }
-.u-gap-2 {
+.u-gap-1\.5 {
   gap: 0.375rem;
 }
 .u-gap-2 {
   gap: 0.5rem;
 }
-.u-gap-3 {
+.u-gap-2\.5 {
   gap: 0.625rem;
 }
 .u-gap-3 {
   gap: 0.75rem;
 }
-.u-gap-4 {
+.u-gap-3\.5 {
   gap: 0.875rem;
 }
 .u-gap-4 {
@@ -14227,7 +14532,7 @@ body.is-open-photoviewer {
 .u-gap-5 {
   gap: 1.25rem;
 }
-.u-gap-6 {
+.u-gap-5\.5 {
   gap: 1.375rem;
 }
 .u-gap-6 {
@@ -14236,7 +14541,7 @@ body.is-open-photoviewer {
 .u-gap-7 {
   gap: 1.75rem;
 }
-.u-gap-8 {
+.u-gap-7\.5 {
   gap: 1.875rem;
 }
 .u-gap-8 {
@@ -14314,19 +14619,19 @@ body.is-open-photoviewer {
 .u-row-gap-1 {
   row-gap: 0.25rem;
 }
-.u-row-gap-2 {
+.u-row-gap-1\.5 {
   row-gap: 0.375rem;
 }
 .u-row-gap-2 {
   row-gap: 0.5rem;
 }
-.u-row-gap-3 {
+.u-row-gap-2\.5 {
   row-gap: 0.625rem;
 }
 .u-row-gap-3 {
   row-gap: 0.75rem;
 }
-.u-row-gap-4 {
+.u-row-gap-3\.5 {
   row-gap: 0.875rem;
 }
 .u-row-gap-4 {
@@ -14335,7 +14640,7 @@ body.is-open-photoviewer {
 .u-row-gap-5 {
   row-gap: 1.25rem;
 }
-.u-row-gap-6 {
+.u-row-gap-5\.5 {
   row-gap: 1.375rem;
 }
 .u-row-gap-6 {
@@ -14344,7 +14649,7 @@ body.is-open-photoviewer {
 .u-row-gap-7 {
   row-gap: 1.75rem;
 }
-.u-row-gap-8 {
+.u-row-gap-7\.5 {
   row-gap: 1.875rem;
 }
 .u-row-gap-8 {
@@ -14424,7 +14729,7 @@ body.is-open-photoviewer {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
 }
-.u-column-gap-2 {
+.u-column-gap-1\.5 {
   -moz-column-gap: 0.375rem;
        column-gap: 0.375rem;
 }
@@ -14432,7 +14737,7 @@ body.is-open-photoviewer {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
-.u-column-gap-3 {
+.u-column-gap-2\.5 {
   -moz-column-gap: 0.625rem;
        column-gap: 0.625rem;
 }
@@ -14440,7 +14745,7 @@ body.is-open-photoviewer {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
 }
-.u-column-gap-4 {
+.u-column-gap-3\.5 {
   -moz-column-gap: 0.875rem;
        column-gap: 0.875rem;
 }
@@ -14452,7 +14757,7 @@ body.is-open-photoviewer {
   -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
 }
-.u-column-gap-6 {
+.u-column-gap-5\.5 {
   -moz-column-gap: 1.375rem;
        column-gap: 1.375rem;
 }
@@ -14464,7 +14769,7 @@ body.is-open-photoviewer {
   -moz-column-gap: 1.75rem;
        column-gap: 1.75rem;
 }
-.u-column-gap-8 {
+.u-column-gap-7\.5 {
   -moz-column-gap: 1.875rem;
        column-gap: 1.875rem;
 }