<commit_before>.works {
  background: url("../image/squares.png");
  height: 100%;

  @media #{$small}, #{$medium}, #{$large} {
    height: auto;
    padding: 10% 0;
  }
}

.works-container {
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;

  /* This solves a bug with flex-basis property that affects Firefox */
  & > * {
    min-width: 0;
  }

  @media #{$small}, #{$medium}, #{$large} {
    flex-direction: column;
  }
}

.works-container-offset {
  flex-basis: 15%;

  @media #{$small}, #{$medium}, #{$large} {
    display: none;
  }
}

.works-container-project {
  display: flex;
  flex-basis: 35%;
  flex-direction: column;
  justify-content: center;

  @media #{$small}, #{$medium}, #{$large} {
    flex-basis: auto;
    text-align: center;
    width: 62%;
  }

  @media #{$small} {
    width: 85%;
  }
}

.works-container-project-slider {
  overflow: hidden;
  width: 80%;

  @media #{$small}, #{$medium}, #{$large} {
    margin: auto;
  }
}

.works-container-project-slider ul {
  left: 0;
  position: relative;
  transition: left 0.5s;
}

.works-container-project-slider ul li {
  float: left;
  width: 100%;

  &:not(:first-child) {
    display: none;
  }
}

.works-container-project-slider-slide h2 {
  margin: 0;
}

.works-container-project-slider-slide p {
  margin: 1.618em 0 0;
}

.works-container-project-navigator {
  margin: 1.618em 0;
  width: 50px;

  @media #{$small}, #{$medium}, #{$large} {
    margin: 1.618em auto;
  }
}

.works-container-project-navigator-left,
.works-container-project-navigator-right {
  cursor: pointer;
  width: 15px;
}

.works-container-project-navigator-left {
  float: left;
}

.works-container-project-navigator-right {
  float: right;
}

.works-container-project-navigator svg path {
  fill: $light-grey;
}

.works-container-project .button-icon {
  display: none;

  @media #{$small}, #{$medium} {
    left: 0;
    margin: auto;
  }
}

.works-container-projectimage {
  display: flex;
  flex-basis: 47.6%;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: relative;

  @media #{$small}, #{$medium}, #{$large} {
    flex-basis: auto;
    margin-top: 1.618em;
    width: 80%;
  }

  @media #{$large} {
    height: 1000px;
  }

  @media #{$medium} {
    height: 650px;
  }

  @media #{$medium} {
    height: 350px;
  }
}

.works-container-projectimage-circles {
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;

  @media #{$small}, #{$medium} {
    position: relative;
    top: 0;
    transform: none;
  }
}

.works-container-projectimage-circles-particles {
  width: 100%;

  &:nth-of-type(1),
  &:nth-of-type(2) {
    position: absolute;<commit_msg>fix a media query with the proper variable<commit_after>.works {
  background: url("../image/squares.png");
  height: 100%;

  @media #{$small}, #{$medium}, #{$large} {
    height: auto;
    padding: 10% 0;
  }
}

.works-container {
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;

  /* This solves a bug with flex-basis property that affects Firefox */
  & > * {
    min-width: 0;
  }

  @media #{$small}, #{$medium}, #{$large} {
    flex-direction: column;
  }
}

.works-container-offset {
  flex-basis: 15%;

  @media #{$small}, #{$medium}, #{$large} {
    display: none;
  }
}

.works-container-project {
  display: flex;
  flex-basis: 35%;
  flex-direction: column;
  justify-content: center;

  @media #{$small}, #{$medium}, #{$large} {
    flex-basis: auto;
    text-align: center;
    width: 62%;
  }

  @media #{$small} {
    width: 85%;
  }
}

.works-container-project-slider {
  overflow: hidden;
  width: 80%;

  @media #{$small}, #{$medium}, #{$large} {
    margin: auto;
  }
}

.works-container-project-slider ul {
  left: 0;
  position: relative;
  transition: left 0.5s;
}

.works-container-project-slider ul li {
  float: left;
  width: 100%;

  &:not(:first-child) {
    display: none;
  }
}

.works-container-project-slider-slide h2 {
  margin: 0;
}

.works-container-project-slider-slide p {
  margin: 1.618em 0 0;
}

.works-container-project-navigator {
  margin: 1.618em 0;
  width: 50px;

  @media #{$small}, #{$medium}, #{$large} {
    margin: 1.618em auto;
  }
}

.works-container-project-navigator-left,
.works-container-project-navigator-right {
  cursor: pointer;
  width: 15px;
}

.works-container-project-navigator-left {
  float: left;
}

.works-container-project-navigator-right {
  float: right;
}

.works-container-project-navigator svg path {
  fill: $light-grey;
}

.works-container-project .button-icon {
  display: none;

  @media #{$small}, #{$medium} {
    left: 0;
    margin: auto;
  }
}

.works-container-projectimage {
  display: flex;
  flex-basis: 47.6%;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: relative;

  @media #{$small}, #{$medium}, #{$large} {
    flex-basis: auto;
    margin-top: 1.618em;
    width: 80%;
  }

  @media #{$large} {
    height: 1000px;
  }

  @media #{$medium} {
    height: 650px;
  }

  @media #{$small} {
    height: 350px;
  }
}

.works-container-projectimage-circles {
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;

  @media #{$small}, #{$medium} {
    position: relative;
    top: 0;
    transform: none;
  }
}

.works-container-projectimage-circles-particles {
  width: 100%;

  &:nth-of-type(1),
  &:nth-of-type(2) {
    position: absolute;
{'fraction_non_alphanumeric': 0.18265343623667768, 'fraction_numerical': 0.031606027195883866, 'mean_word_length': 3.0258875739644973, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '4265029', 'n_tokens_mistral': 2232, 'n_tokens_neox': 2028, 'n_words': 438}