@layer page {
main > picture:first-of-type {
  inline-size: min(100%, 24rem);
  margin-inline: auto;
}

main > picture:first-of-type img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

main > section:nth-of-type(2) {
  display: grid;
  gap: var(--space-md);
}

main > section:nth-of-type(2) h2,
#hobbies > ul {
  margin-block-end: 0;
}

main > section:nth-of-type(2) article {
  padding: var(--space-md);
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-muted));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

main > section:nth-of-type(2) article h3 {
  margin-block-end: var(--space-xs);
}

main > section:nth-of-type(2) article p {
  margin-block-end: 0;
}

main > section:nth-of-type(3) {
  display: grid;
  gap: var(--space-lg);
}

main > section:nth-of-type(3) h2 {
  margin-block-end: 0;
}

main > section:nth-of-type(4) p:first-of-type {
  font-size: var(--step-1);
}

main > section:nth-of-type(5) iframe {
  aspect-ratio: 16 / 9;
  min-block-size: 18rem;
}

#hobbies {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

#hobbies h2 {
  margin-block-end: 0;
}

#hobbies picture {
  inline-size: min(100%, 24rem);
  margin-inline: auto;
}

#hobbies img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

#hobbies > ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
  padding: 0;
  list-style: none;
}

#hobbies > ul > li {
  padding: 0.35em 0.7em;
  background: var(--color-secondary-soft);
  color: var(--color-primary-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

pokemon-fact-card {
  display: block;
  align-self: start;
  justify-self: center;
  inline-size: min(100%, 26rem);
}

pokemon-fact-card article {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  padding: var(--space-md);
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-muted));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

pokemon-fact-card h3,
pokemon-fact-card dl,
pokemon-fact-card dd {
  margin-block-end: 0;
}

pokemon-fact-card h3 {
  font-size: var(--step-0);
}

pokemon-fact-card dl {
  display: grid;
  gap: var(--space-xs);
}

pokemon-fact-card dt {
  font-weight: 700;
}

pokemon-fact-card dd {
  margin-inline-start: 0;
}

pokemon-fact-card button {
  justify-self: center;
}

pokemon-fact-card[state="loading"] article {
  border-color: var(--color-accent);
}

pokemon-fact-card[state="error"] article {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

@media (width >= 50rem) {
  main > section:nth-of-type(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main > section:nth-of-type(2) h2 {
    grid-column: 1 / -1;
  }

  main > section:nth-of-type(3) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  main > section:nth-of-type(3) h2 {
    grid-column: 1 / -1;
  }

  #hobbies {
    grid-template-columns: minmax(12rem, 0.85fr) minmax(14rem, 1fr);
  }

  #hobbies h2 {
    grid-column: 1 / -1;
  }

  #hobbies picture {
    justify-self: end;
    margin-inline: 0;
  }

  pokemon-fact-card {
    grid-column: 1 / -1;
  }
}
}