* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --side-margin: 0.5rem;
}

h1 {
  text-align: center;
  padding: 2rem var(--side-margin);
  font-size: clamp(2.2rem, 10vmin, 4rem);
  line-height: clamp(2.2rem, 10vmin, 4rem);
}

main {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  --breakpoint: 1200px;
  max-width: calc(var(--breakpoint) + 400px);
  --modifier: calc((var(--breakpoint) - 100%) * 999);
}

main > section {
  text-align: center;
  margin: 0 var(--side-margin) 20px var(--side-margin);
  flex-basis: max(calc(33.333% - var(--side-margin) * 2), var(--modifier));
}

main > section > h2 {
  vertical-align: middle;
}

.content-container {
  list-style: none;
  /* set through JS: */
  padding: 0;
  max-height: 0;
  opacity: 0;
}

.sub-category-title-container {
  display: flex;
  align-items: center;
}

.sub-category-title-container > h3 {
  flex-grow: 1;
}

.content-container > li {
  max-width: max-content;
  margin: 1.5rem 0;
  text-align: left;
}