@layer layout {
  .cng-Container {
    max-width: var(--cng-container-max);
    margin-inline: auto;
    padding-inline: var(--cng-container-padding);
  }

  .cng-Container--narrow {
    max-width: 960px;
  }

  .cng-Container--wide {
    max-width: 1440px;
  }

  .cng-Grid {
    display: grid;
    gap: var(--cng-space-md);
  }

  .cng-Grid--2col {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }

  .cng-Grid--3col {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  }

  .cng-Grid--4col {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }

  @container (min-width: 768px) {
    .cng-Grid--2col {
      grid-template-columns: repeat(2, 1fr);
    }
    .cng-Grid--3col {
      grid-template-columns: repeat(3, 1fr);
    }
    .cng-Grid--4col {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .cng-Flex {
    display: flex;
    gap: var(--cng-space-md);
  }

  .cng-Flex--column {
    flex-direction: column;
  }

  .cng-Flex--center {
    align-items: center;
    justify-content: center;
  }

  .cng-Flex--between {
    justify-content: space-between;
  }

  .cng-Flex--wrap {
    flex-wrap: wrap;
  }

  .cng-Section {
    padding-block: var(--cng-space-3xl);
    container-type: inline-size;
  }

  .cng-Section--compact {
    padding-block: var(--cng-space-2xl);
  }

  .cng-Section--spacious {
    padding-block: clamp(4rem, 8vw, 8rem);
  }

  .cng-Header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--cng-color-bg);
    border-block-end: 1px solid var(--cng-color-border);
    backdrop-filter: blur(8px);
  }

  .cng-Footer {
    background-color: var(--cng-color-bg-elevated);
    border-block-start: 1px solid var(--cng-color-border);
    padding-block: var(--cng-space-2xl);
  }

  .u-visuallyHidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .u-textCenter {
    text-align: center;
  }

  .u-textBalance {
    text-wrap: balance;
  }

  .u-contentVisibility {
    content-visibility: auto;
  }
}