@import '../../styles/common';

.Grid {
  // Remap custom properties as mobile first fallbacks for grid-template-areas and grid-teplate-columns
  --pc-grid-areas-xs: initial;
  --pc-grid-areas-sm: var(--pc-grid-areas-xs);
  --pc-grid-areas-md: var(--pc-grid-areas-sm);
  --pc-grid-areas-lg: var(--pc-grid-areas-md);
  --pc-grid-areas-xl: var(--pc-grid-areas-lg);
  --pc-grid-columns-xs: 6;
  --pc-grid-columns-sm: var(--pc-grid-columns-xs);
  --pc-grid-columns-md: var(--pc-grid-columns-sm);
  --pc-grid-columns-lg: 12;
  --pc-grid-columns-xl: var(--pc-grid-columns-lg);
  display: grid;
  gap: var(--pc-grid-gap-xs, var(--p-space-4));
  grid-template-areas: var(--pc-grid-areas-xs);
  grid-template-columns: repeat(var(--pc-grid-columns-xs), minmax(0, 1fr));

  @media #{$p-breakpoints-sm-up} {
    gap: var(--pc-grid-gap-sm, var(--p-space-4));
    grid-template-areas: var(--pc-grid-areas-sm);
    grid-template-columns: repeat(var(--pc-grid-columns-sm), minmax(0, 1fr));
  }

  @media #{$p-breakpoints-md-up} {
    gap: var(--pc-grid-gap-md, var(--p-space-4));
    grid-template-areas: var(--pc-grid-areas-md);
    grid-template-columns: repeat(var(--pc-grid-columns-md), minmax(0, 1fr));
  }

  @media #{$p-breakpoints-lg-up} {
    gap: var(--pc-grid-gap-lg, var(--p-space-4));
    grid-template-areas: var(--pc-grid-areas-lg);
    grid-template-columns: repeat(var(--pc-grid-columns-lg), minmax(0, 1fr));
  }

  @media #{$p-breakpoints-xl-up} {
    gap: var(--pc-grid-gap-xl, var(--p-space-4));
    grid-template-areas: var(--pc-grid-areas-xl);
    grid-template-columns: repeat(var(--pc-grid-columns-xl), minmax(0, 1fr));
  }
}