<commit_before>@import 'components/SummaryCard/styles.css';
@import 'components/ToolNav/styles.css';
@import 'components/Connect/styles.css';
@import 'shared/components/DataGrid/styles.css';
@import 'shared/components/ToolTip/styles.css';

.overview {
  background: var(--background-gray-offset);
  margin: 0 calc(var(--spacing-3) * -1);
  padding: 0 var(--spacing-3) var(--spacing-3);

  @media (min-width: 550px) {
    margin: 0 calc(var(--spacing-6) * -1);
    padding: var(--spacing-5) var(--spacing-6) var(--spacing-6);
  }

  @media (min-width: 1400px) {
    --extra-viewport-space: calc(calc(100vw - 1304px) / 2);
    margin: 0 calc(var(--extra-viewport-space) * -1);
    padding: var(--spacing-7) var(--extra-viewport-space);
  }
}

@media (min-width: 1024px) {
  header p {
    margin-right: calc(-1 * var(--spacing-7));
  }
}

.consumeGap {
  margin-bottom: -8rem;
}

.gettingStarted {
  & > p {
    margin: var(--spacing-3) 0 var(--spacing-2);
  }

  & > div {
    margin: var(--spacing-3) 0 var(--spacing-7);
  }
}

.sidebarLayout {
  display: grid;
  gap: var(--spacing-3);

  @media (min-width: 700px) {
    grid-template-columns: var(--section-aside-width) 1fr;

    & > aside {
      margin-right: var(--spacing-2);
      text-align: right;

      & > small {
        max-width: 20ch;
      }
    }
  }
}

.overviewGrid a {
  font-weight: bold;
}

.sectionHeader {
  display: inline-block;
  font-size: 1.5rem;
  text-transform: capitalize;
  margin-bottom: var(--spacing-2);
  position: relative;
  color: var(--backpack-blue);
  line-height: var(--font-lineheight--tight);

  @media (min-width: 700px) {
    margin-bottom: var(--spacing-4);
  }

  &:before {
    content: '#';
    color: var(--denim-blue);
    margin-right: var(--spacing-1);
  }

  &:hover:before,
  &:focus:before {
    color: var(--backpack-blue);
  }
}

.overviewHeader,
.sectionHeader {
  @media (min-width: 700px) {
    text-align: end;
    width: calc(
      var(--section-aside-width) - var(--spacing-4) + var(--spacing-3)
    );
  }
}

.overviewHeader {
  font-size: 2rem;
}

.summaryList {
  display: grid;
  gap: var(--spacing-5);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero {
  & h1 {
    margin-bottom: var(--spacing-2);
  }

  & > section > h2 {
    margin-bottom: var(--spacing-4);
  }

  & > section > div {
    @media (max-width: 822px) {
      flex-direction: column-reverse;
      align-items: flex-start;
    }
  }
}

.heroImage {
  width: 400px;
  height: 400px;
  background: var(--ice-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  margin: -60px 0px -87px -115px;

  @media (min-width: 480px) {
    width: 600px;
    height: 600px;
    margin: -70px 50px -120px -175px;
  }

  @media (min-width: 822px) {
    margin: 0 50px -100px -225px;
  }

  & svg {
    width: 65%;
    height: 65%;
    object-fit: contain;
  }
}

.message {
  & > h3 {
    font-weight: var(--font-weight--bold);
    font-size: var(--font-size--h2);
  }

  & > p {
    margin: var(--spacing-3) 0;
  }
}

.webdev {
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  width: max-content;
  font-weight: bold;
  font-size: 0.7em;
  margin-top: 5em;

  img {
    object-fit: contain;
    object-position: top;
    margin-top: 1em;
  }
}<commit_msg>Fix mobile layout<commit_after>@import 'components/SummaryCard/styles.css';
@import 'components/ToolNav/styles.css';
@import 'components/Connect/styles.css';
@import 'shared/components/DataGrid/styles.css';
@import 'shared/components/ToolTip/styles.css';

.overview {
  background: var(--background-gray-offset);
  margin: 0 calc(var(--spacing-3) * -1);
  padding: 0 var(--spacing-3) var(--spacing-3);

  @media (min-width: 550px) {
    margin: 0 calc(var(--spacing-6) * -1);
    padding: var(--spacing-5) var(--spacing-6) var(--spacing-6);
  }

  @media (min-width: 1400px) {
    --extra-viewport-space: calc(calc(100vw - 1304px) / 2);
    margin: 0 calc(var(--extra-viewport-space) * -1);
    padding: var(--spacing-7) var(--extra-viewport-space);
  }
}

@media (min-width: 1024px) {
  header p {
    margin-right: calc(-1 * var(--spacing-7));
  }
}

.consumeGap {
  margin-bottom: -8rem;
}

.gettingStarted {
  & > p {
    margin: var(--spacing-3) 0 var(--spacing-2);
  }

  & > div {
    margin: var(--spacing-3) 0 var(--spacing-7);
  }
}

.sidebarLayout {
  display: grid;
  gap: var(--spacing-3);

  @media (min-width: 700px) {
    grid-template-columns: var(--section-aside-width) 1fr;

    & > aside {
      margin-right: var(--spacing-2);
      text-align: right;

      & > small {
        max-width: 20ch;
      }
    }
  }
}

.overviewGrid a {
  font-weight: bold;
}

.sectionHeader {
  display: inline-block;
  font-size: 1.5rem;
  text-transform: capitalize;
  margin-bottom: var(--spacing-2);
  position: relative;
  color: var(--backpack-blue);
  line-height: var(--font-lineheight--tight);

  @media (min-width: 700px) {
    margin-bottom: var(--spacing-4);
  }

  &:before {
    content: '#';
    color: var(--denim-blue);
    margin-right: var(--spacing-1);
  }

  &:hover:before,
  &:focus:before {
    color: var(--backpack-blue);
  }
}

.overviewHeader,
.sectionHeader {
  @media (min-width: 700px) {
    text-align: end;
    width: calc(
      var(--section-aside-width) - var(--spacing-4) + var(--spacing-3)
    );
  }
}

.overviewHeader {
  font-size: 2rem;
}

.summaryList {
  display: grid;
  gap: var(--spacing-5);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero {
  & h1 {
    margin-bottom: var(--spacing-2);
  }

  & > section > h2 {
    margin-bottom: var(--spacing-4);
  }

  & > section > div {
    @media (max-width: 822px) {
      flex-direction: column-reverse;
      align-items: flex-start;
    }
  }
}

.heroImage {
  width: 400px;
  height: 400px;
  background: var(--ice-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  margin: -60px 0px -87px -115px;

  @media (min-width: 480px) {
    width: 600px;
    height: 600px;
    margin: -70px 50px -120px -175px;
  }

  @media (min-width: 822px) {
    margin: 0 50px -100px -225px;
  }

  & svg {
    width: 65%;
    height: 65%;
    object-fit: contain;
  }
}

.message {
  & > h3 {
    font-weight: var(--font-weight--bold);
    font-size: var(--font-size--h2);
  }

  & > p {
    margin: var(--spacing-3) 0;
  }
}

.webdev {
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  width: max-content;
  font-weight: bold;
  font-size: 0.7em;
  margin-top: 5em;
  margin-bottom: 3em;

  img {
    object-fit: contain;
    object-position: top;
    margin-top: 1em;
  }
}
{'fraction_non_alphanumeric': 0.18674698795180722, 'fraction_numerical': 0.04099324125771378, 'mean_word_length': 2.5676100628930816, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5198720', 'n_tokens_mistral': 2951, 'n_tokens_neox': 2674, 'n_words': 502}