.container {
  width: min(100% - (var(--container-padding) * 2), var(--container-width));
  margin-inline: auto;
}

.main-content {
  min-height: 100vh;
}

.hero-section {
  padding-block: var(--section-spacing);
  text-align: center;
}

.hero-section__title {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  letter-spacing: 3px;
  text-shadow: 3px 3px 0 var(--color-primary-dark);
}

.hero-section__text {
  max-width: 560px;
  margin: var(--space-5) auto 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-tiny);
  line-height: 2;
  letter-spacing: 1px;
}

.pokemon-section {
  padding-bottom: var(--section-spacing);
}

.pokemon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}

.load-more-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}