<commit_before>.c-preface {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: map(spaces, medium) map(spaces, large);
  background-color: $color-year;
  background-color: var(--color-year, $color-year);
  background-image: inline('diamond.svg');
  background-repeat: repeat;

  @media (--from-medium-screen) {
    min-height: 9rem;
  }

  @media (--from-large-screen) {
    padding-top: 10%;
    padding-left: 25%;
  }
}

.c-preface__title {
  @apply --typeset-title;
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-top: auto;
  color: map(colors, primary, light);

  svg {
    width: 1em;
    height: 1em;
    margin-right: map(spaces, small);
  }
}

.c-preface__main {
  position: relative;
  margin-top: map(spaces, small);
  color: color(white a(75%));

  .s-prose p:first-of-type {
    @apply --typeset-lede;
  }

  .c-avatar {
    width: 50%;
    float: right;
    margin-top: -7.5%;
    margin-right: -7.5%;

    @media (--from-large-screen) {
      float: left;
      margin-left: -33%;
      margin-right: map(spaces, medium);
    }
  }
<commit_msg>Refine styles for preface<commit_after>.c-preface {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: map(spaces, medium) map(spaces, large) map(spaces, large);
  background-color: $color-year;
  background-color: var(--color-year, $color-year);
  background-image: inline('diamond.svg');
  background-repeat: repeat;

  @media (--from-medium-screen) {
    min-height: 9rem;
  }

  @media (--from-large-screen) {
    padding-top: 10%;
    padding-left: 25%;
  }
}

.c-preface__title {
  @apply --typeset-title;
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-top: auto;
  color: map(colors, primary, light);

  svg {
    width: 1em;
    height: 1em;
    margin-right: map(spaces, small);
  }
}

.c-preface__main {
  position: relative;
  margin-top: map(spaces, small);
  color: color(white a(75%));

  .s-prose p:first-of-type {
    @apply --typeset-lede;
  }

  .s-prose p:last-of-type {
    margin-bottom: 0;
  }

  .c-avatar {
    width: 50%;
    float: right;
    margin-top: -7.5%;
    margin-right: -7.5%;

    @media (--from-large-screen) {
      float: left;
      margin-left: -33%;
      margin-right: map(spaces, medium);
    }
  }

{'fraction_non_alphanumeric': 0.1697048611111111, 'fraction_numerical': 0.015190972222222222, 'mean_word_length': 2.778688524590164, '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': '1776392', 'n_tokens_mistral': 915, 'n_tokens_neox': 861, 'n_words': 179}