semantic-styles/package/elements/section.css

"Responsive, Themed, UI Design System."

section:not(:empty):not(:only-child):has(article) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: var(--space-sm);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

@media (max-width: 1300px) {
  section:not(:empty):not(:only-child):has(article) {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  section:not(:empty):not(:only-child):has(article) {
    grid-template-columns: 1fr;
  }
}