/* Standard Shadow(s) */
.shadow-standard {
  box-shadow: 0px 5px 16px -5px rgba(33, 33, 33, 0.2);
  transition: all 0.2s ease-in;
}
.shadow-standard:hover {
  box-shadow: 0px 8px 32px 0px rgba(33, 33, 33, 0.1);
}
/* Max Width(s) */
.max-width-1024 {
  max-width: 1024px;
}
.max-width-768 {
  max-width: 768px;
}
.max-width-640 {
  max-width: 640px;
}
.max-width-480 {
  max-width: 480px;
}
/* Margin Auto */
.margin-auto {
  margin-left: auto;
  margin-right: auto;
}
.mt-auto {
  margin-top: auto;
}
/* Position Properties */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  top: 0px;
  left: 0px;
}
.sticky {
  position: sticky;
  top: 24px;
}
/* Image Aspect Ratios */
.aspect-1-1 img, .aspect-1-1 {
  aspect-ratio: 1;
  object-fit: cover;
}
.aspect-3-2 img {
  aspect-ratio: 1.5;
  object-fit: cover;
}
.aspect-2-3 img {
  aspect-ratio: 0.6666666667;
  object-fit: cover;
}
.aspect-4-3 img {
  aspect-ratio: 1.3333333333;
  object-fit: cover;
}
.aspect-3-4 img {
  aspect-ratio: 0.75;
  object-fit: cover;
}
.aspect-16-9 img {
  aspect-ratio: 1.7777777778;
  object-fit: cover;
}
.aspect-9-16 img {
  aspect-ratio: 0.5625;
  object-fit: cover;
}
.overflow-hidden {
  overflow: hidden;
}
.highlighter {
  background: var(--accent-highlight);
  padding: 2px 4px;
}
.gb-button-wrapper .justify-start {
  justify-content: flex-start;
}
.gb-button-wrapper .justify-end {
  justify-content: flex-end;
}
/* Tooltips */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:before, [data-tooltip]:after {
  --scale: 0;
  --arrow-size: 8px;
  --tooltip-color: hsla(191, 0%, 95%, 0.9);
  --tooltip-text-color: #222222;
  position: absolute;
  top: -0.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
  transition: 150ms transform;
  transform-origin: bottom center;
}
[data-tooltip]:before {
  --translate-y: calc(-100% - var(--arrow-size));
  content: attr(data-tooltip);
  color: var(--tooltip-text-color);
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  width: max-content;
  background: var(--tooltip-color);
  border-radius: 0.3rem;
  text-align: center;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after {
  --scale: 1;
}
[data-tooltip]:after {
  --translate-y: calc(-1 * var(--arrow-size));
  content: "";
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--tooltip-color);
  transform-origin: top center;
}