@datawheel/canon-core/src/components/Section.css

Reusable React environment and components for creating visualization engines.

.section {
  padding: calc(var(--gutter) / 2);

  & article {
    color: var(--section-article-color);
    font-family: var(--section-article-family);
    font-size: var(--section-article-size);
    font-weight: var(--section-article-weight);
    margin: calc(var(--gutter) / 2);
  }

  & .columns {
    display: flex;
    flex-direction: row;
    width: 100%;

    & article {
      flex: none;
      width: var(--section-article-small);
    }

    @media only screen and (max-width : 768px) {
      flex-direction: column;

      & article {
        width: auto;
      }

    }

  }

  & .rows {
    display: flex;
    flex-direction: column;
    width: 100%;

    & article {
      flex: none;
      width: var(--section-article-large);
    }

    @media only screen and (max-width : 768px) {

      & article {
        width: auto;
      }

    }

  }

  & .viz {
    flex: 1;
    margin: calc(var(--gutter) / 2);
  }

}