.pokemon-grid {
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  container-name: pokemon-grid;
}

.pokemon-grid__items {
  --pokemon-grid-current-gap: var(--pokemon-grid-gap-medium);
  --pokemon-grid-current-columns: var(--pokemon-grid-columns-medium);
  display: grid;
  grid-template-columns: repeat(var(--pokemon-grid-current-columns), minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  gap: var(--pokemon-grid-current-gap);
  transition: gap var(--pokemon-grid-transition);
}

.pokemon-grid[data-layout='large'] .pokemon-grid__items {
  --pokemon-grid-current-columns: var(--pokemon-grid-columns-large);
}

.pokemon-grid[data-layout='small'] .pokemon-grid__items {
  --pokemon-grid-current-columns: var(--pokemon-grid-columns-small);
}

@container pokemon-grid (min-width: 640px) {
  .pokemon-grid[data-layout='large'] .pokemon-grid__items {
    --pokemon-grid-current-columns: var(--pokemon-grid-wide-columns-large);
  }

  .pokemon-grid[data-layout='medium'] .pokemon-grid__items {
    --pokemon-grid-current-columns: var(--pokemon-grid-wide-columns-medium);
  }

  .pokemon-grid[data-layout='small'] .pokemon-grid__items {
    --pokemon-grid-current-columns: var(--pokemon-grid-wide-columns-small);
  }
}

.pokemon-grid[data-gap='small'] .pokemon-grid__items {
  --pokemon-grid-current-gap: var(--pokemon-grid-gap-small);
}

.pokemon-grid[data-gap='large'] .pokemon-grid__items {
  --pokemon-grid-current-gap: var(--pokemon-grid-gap-large);
}

.pokemon-grid__items[hidden] {
  display: none;
}

.pokemon-grid__cell {
  width: 100%;
  min-width: min(100%, var(--pokemon-grid-item-min-width));
  justify-self: center;
}

.pokemon-grid__sentinel {
  grid-column: 1 / -1;
  width: 100%;
  height: var(--pokemon-grid-sentinel-size);
  pointer-events: none;
}

.pokemon-grid__sentinel[hidden] {
  display: none;
}

.pokemon-grid > .loading-state {
  min-height: var(--pokemon-grid-loading-min-height);
}

.pokemon-grid > .empty-state {
  min-height: var(--pokemon-grid-empty-min-height);
}

@container (min-width: 640px) {
  .pokemon-grid__items {
    box-sizing: border-box;
    padding-inline: var(--page-padding-inline);
  }
}