@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-ring: var(--ring);
}

:root {
  --category-grid-background: var(--background);
  --category-grid-row-gap: calc(var(--spacing, 0.25rem) * 4);
  --category-grid-column-gap: calc(var(--spacing, 0.25rem) * 4);
  --category-grid-padding: calc(var(--spacing) * 4);
  --category-grid-desktop-padding: calc(var(--spacing) * 10);
  --category-grid-max-width: calc(var(--spacing) * 341.5);
}

@layer base {
  body {
    min-width: calc(var(--spacing) * 80);
    min-height: 100vh;
    background: var(--category-grid-background);
  }
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    'featured featured'
    'bookcases gaming'
    'desks desks';
  width: min(100%, var(--category-grid-max-width));
  margin-inline: auto;
  padding: var(--category-grid-padding);
  row-gap: var(--category-grid-row-gap);
  column-gap: var(--category-grid-column-gap);
}

.category-grid__item {
  display: block;
  min-width: 0;
  outline-color: var(--ring);
}

.category-grid__item--featured {
  grid-area: featured;
}

.category-grid__item--bookcases {
  grid-area: bookcases;
}

.category-grid__item--gaming {
  grid-area: gaming;
}

.category-grid__item--desks {
  grid-area: desks;
}

.category-grid__picture,
.category-grid__image {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 48rem) {
  .category-grid {
    grid-template-columns: 655fr 317fr 317fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'featured bookcases gaming'
      'featured desks desks';
    padding: var(--category-grid-desktop-padding);
  }

  .category-grid__item,
  .category-grid__picture,
  .category-grid__image {
    width: 100%;
    height: 100%;
  }

}