@layer page {
main > section {
  display: grid;
  gap: var(--space-lg);
}

main > section h2 {
  margin-block-end: 0;
}

details {
  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);
}

summary {
  color: var(--color-primary-strong);
  cursor: pointer;
  font-weight: 700;
}

#devices article {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

#devices details {
  block-size: 100%;
  transition:
    border-color 360ms ease,
    box-shadow 360ms ease;
}

#devices details:hover,
#devices details:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-soft);
}

#devices summary {
  display: grid;
  gap: var(--space-2xs);
  list-style-position: outside;
}

#devices summary span {
  font-size: var(--step-1);
}

#devices summary small {
  color: var(--color-text-muted);
  font-size: var(--step-neg-1);
  font-weight: 500;
}

#devices details > * + * {
  margin-block-start: var(--space-sm);
}

#peripherals {
  gap: var(--space-xs);
  align-items: start;
}

#peripherals article {
  padding: var(--space-sm);
}

#peripherals article > * + * {
  margin-block-start: var(--space-2xs);
}

#peripherals h3 {
  margin-block-end: 0;
  font-size: var(--step-0);
}

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

  main > section:first-of-type h2 {
    grid-column: 1 / -1;
  }

  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;
  }
}
}