@layer pix-components{.pix-grid{container:pix-grid/inline-size}.pix-grid__inner{grid-template-columns:repeat(var(--cols-base), 1fr);display:grid}.pix-grid[data-gap=none]>.pix-grid__inner{gap:0}.pix-grid[data-gap=tiny]>.pix-grid__inner{gap:var(--spacing-small)}.pix-grid[data-gap=small]>.pix-grid__inner{gap:var(--spacing-medium)}.pix-grid[data-gap=regular]>.pix-grid__inner{gap:var(--spacing-large)}.pix-grid[data-gap=big]>.pix-grid__inner{gap:var(--spacing-2xlarge)}.pix-grid[data-gap=huge]>.pix-grid__inner{gap:var(--spacing-3xlarge)}@container pix-grid (inline-size>=48rem){.pix-grid__inner{grid-template-columns:repeat(var(--cols-md), 1fr)}}@container pix-grid (inline-size>=64rem){.pix-grid__inner{grid-template-columns:repeat(var(--cols-lg), 1fr)}}@container pix-grid (inline-size>=80rem){.pix-grid__inner{grid-template-columns:repeat(var(--cols-xl), 1fr)}}}