ExamplesList.module.css

.root {
  flex-basis: var(--col8);
}

.category {
  & > h2 {
    text-transform: capitalize;
  }
}

.categoryName {
  display: flex;
  align-items: center;
  margin-top: var(--vertical-margin-medium);

  & h2 {
    flex: 1;
    margin-bottom: 0;
  }

  & .toggleButton {
    text-align: right;
    flex: 0 0 200px;
  }
}

.categoryDescription {
  margin-bottom: var(--vertical-margin-large);
}

.subcategoryName {
  flex-basis: var(--col1);
}

.examples {
  flex-basis: var(--col7);
}

.cover {
  width: 100%;
  margin-bottom: var(--vertical-margin-xsmall);
}

.item {
  flex: 0 0 calc(25% - 2 * var(--gutter)); 
  max-width: calc(25% - 2 * var(--gutter));

  & h4 {
    font-size: var(--text-regular);
    font-weight: 400;
  }
}

@media (--reduced) {
  .subcategoryName {
    flex-basis: var(--col8);
  }

  .examples {
    flex-basis: var(--col8);
  }

  .item {
    flex-basis: var(--col2);
  }
}

@media (--small) {
  .categoryName {
    display: block;

    & .toggleButton {
      text-align: left;
      margin: var(--vertical-margin-small) 0;
    }
  }

  .intro {
    padding-right: var(--gutter);
  }

  .item {
    flex-basis: var(--col4);
  }
}