/* Layout Primitives */
/* Almost every ui is just combinations of: */
.container-sm,
.container-md,
.container-lg {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}

.container-sm {
  max-width: 640px;
}

.container-md {
  max-width: 768px;
}

.container-lg {
  max-width: 1024px;
}

/* .stack { */
/*   display: flex; */
/*   flex-direction: column; */
/*   gap: 1rem; */
/* } */

/* .cluster { */
/*   display: flex; */
/*   flex-wrap: wrap; */
/*   gap: 1rem; */
/* } */

/* .grid { */
/*   display: grid; */
/*   grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); */
/*   gap: 1rem; */
/* } */

/* .center { */
/*   display: flex; */
/*   align-items: center; */
/*   justify-content: center; */
/* } */

/* .center { */
/*   margin-inline: auto; */
/*   max-width: 60ch; */
/* } */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: color-mix(in oklch, var(--neutral-100), transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-footer {
  p {
    text-align: center;
    font-size: var(--text-sm);
    padding-block: calc(var(--spacing) * 8);
  }
}

.page-header {
  text-align: center;
  padding-block: calc(var(--spacing) * 8);
}