<commit_before>.kotlin-why-section {
  margin-top: 0;
  padding-top: var(--xxxl-space);
}

.kotlin-why-section__section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: var(--xxl-space);

  &:last-of-type {
    margin-bottom: var(--xxxl-space);
  }
}

.kotlin-why-section .kto-heading_size_hero {
  margin-bottom: var(--l-space);
}

.kotlin-why-section .kto-text_size_m {
  margin-bottom: var(--m-space);
}

.kotlin-why-section__media {
  margin-bottom: var(--l-space);
}

.kotlin-why-section__media_type_why {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.kotlin-why-section .CodeMirror pre.CodeMirror-line {
  font-size: 16px;
  line-height: 24px;
}

.kotlin-why-section__section-content {
  width: 100%;
}

.kotlin-why-section__section .kto-button {
  align-self: center;
}

@media (min-width: $breakpoint-m) {
  .kotlin-why-section__section {
    display: grid;
    grid-template-columns: 33% 1fr;
    grid-template-rows: max-content max-content auto;
    gap: 0 32px;
    grid-template-areas:
    "header content"
    "text content"
    "button content"
    ;

    .kto-heading {
      grid-area: header;
    }
<commit_msg>fix: ktl-511: align why code<commit_after>.kotlin-why-section {
  margin-top: 0;
  padding-top: var(--xxxl-space);
}

.kotlin-why-section__section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: var(--xxl-space);

  &:last-of-type {
    margin-bottom: var(--xxxl-space);
  }
}

.kotlin-why-section .kto-heading_size_hero {
  margin-bottom: var(--l-space);
}

.kotlin-why-section .kto-text_size_m {
  margin-bottom: var(--m-space);
}

.kotlin-why-section__media {
  margin-bottom: var(--l-space);
}

.kotlin-why-section__media_type_why {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.kotlin-why-section .CodeMirror pre.CodeMirror-line {
  font-size: 16px;
  line-height: 24px;
}

.kotlin-why-section__section-content {
  width: 100%;
}

.kotlin-why-section__section .kto-button {
  align-self: center;
}

@media (min-width: $breakpoint-m) {
  .kotlin-why-section__section {
    display: grid;
    grid-template-columns: 33% 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0 32px;
    grid-template-areas:
    "header content"
    "text content"
    "button content"
    ;

    .kto-heading {
      grid-area: header;
    }

{'fraction_non_alphanumeric': 0.15791599353796446, 'fraction_numerical': 0.015347334410339256, 'mean_word_length': 3.0740131578947367, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '124117', 'n_tokens_mistral': 1034, 'n_tokens_neox': 970, 'n_words': 162}