:root{
  --ns-max-width: 1200px;
  --ns-gutter: clamp(14px, 3vw, 28px);
  --ns-radius: 12px;
}

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

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: clamp(16px, 1.1vw + 12px, 20px);
}

body{
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}

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

input,
select,
textarea,
button{
  font: inherit;
  max-width: 100%;
}

main{ width: 100%; }

.container,
.page-shell,
.wrap,
.content,
.panel,
.card,
.login-shell,
.signup-shell,
.form-shell{
  max-width: var(--ns-max-width);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px){
  main,
  .container,
  .page-shell,
  .wrap,
  .content,
  .panel,
  .card,
  .login-shell,
  .signup-shell,
  .form-shell{
    padding-left: var(--ns-gutter);
    padding-right: var(--ns-gutter);
  }
  .grid,
  .cards,
  .card-grid,
  .tiles{
    grid-template-columns: 1fr !important;
  }
  .stack-mobile{ flex-direction: column !important; }
}

@media (max-width: 700px){
  [style*="width:"]{ max-width: 100% !important; }
  [style*="min-width:"]{ min-width: 0 !important; }
  [style*="max-width:"]{ max-width: 100% !important; }
}