:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --container-sm: 100%;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1120px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --text-xs: clamp(0.75rem, 0.72rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.25rem);

  --touch-target: 44px;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

.u-container {
  width: min(100% - (var(--space-4) * 2), var(--container-xl));
  margin-inline: auto;
}

.u-grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.u-hide-mobile {
  display: none !important;
}

.u-touch-target {
  min-height: var(--touch-target);
}

.shai-modal-shell {
  width: min(100%, 680px);
  max-height: min(90vh, calc(100dvh - 2rem));
  overflow-y: auto;
}

@media (min-width: 768px) {
  .u-grid-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .u-grid-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .u-hide-mobile {
    display: initial !important;
  }
}