<commit_before>.box {
  background-color: #666; // default color, gets overriden with inline style
  color: #fff;
  position: relative;
  margin-bottom: 3rem;

  &:after{
    content: "";
    display: block;
    padding-top: 50%; // ratio
  }
}

.svg .box {
  background-color: transparent !important;
}

.box__content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.box__content__logo {
  width: 20%;
  svg {
    display: block;
    * {
      fill: #fff;
    }
  }

  @include if-wider-than(500px) {
    width: 10%;
  }
}

.box__content__headline {
  width: 62%;
  margin-top: .5rem;
  margin-bottom: 0;
  font-size: modular-scale(1rem, 1);
  line-height: 1.3;

  // David: setting breakpoints just based on
  // what looks good depending on our current titles
  // is there a better way?
  // Hjortur: Nope - I think that is the only way.
  @include if-wider-than(450px) {
    max-width: 46%;
    font-size: modular-scale(1rem, 2);
    line-height: 1;
    margin-top: 1rem;
  }

  @include if-wider-than(650px) {
    font-size: modular-scale(1rem, 3);
    margin-top: 2rem;
  }

  @include if-wider-than($breakpoint-two-px) {
    font-size: modular-scale(1rem, 2);
  }

  @include if-wider-than(900px) {
    font-size: modular-scale(1rem, 3);
  }

  @include if-wider-than(1100px) {
    font-size: modular-scale(1rem, 4);
    max-width: 450px;
    margin-top: 3rem;
  }

}

.box__content__cta {
  display: none;
  @include if-wider-than(500px) {
    display: block;
    position: absolute;
    bottom: 11%;
    font-size: modular-scale(1rem, 0);
  }
}

.box__content__img  {
  position: absolute;
  top: 24%; //position under angle on box
  bottom: 0;
  right: 0;
  left: 58%;
  text-align: center;
  overflow: hidden;

  img {
    height: 100%;
    width: auto;
  }
  noscript {
    position: absolute;
    top: 0;
    right: 0;
  }

  @include if-wider-than(450px) {
    top: 3%; //position under angle on box
    bottom: 0;
    right: 0;
    left: 46%;
  }
}

.box__content__img--right {
  text-align: right;
}

.box__content__img--left {
  text-align: left;
}

.box__shape {
  fill: #666;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: $easeOutQuad;
  backface-visibility: hidden;
}

.no-touch {
  .box:hover {
    .box__shape--odd {
      transform: rotate(-1deg);
    }
    .box__shape--even {
      transform: rotate(1deg);
    }
  }
}<commit_msg>work: removing osm hover effect because it looks broken on Tictail<commit_after>.box {
  background-color: #666; // default color, gets overriden with inline style
  color: #fff;
  position: relative;
  margin-bottom: 3rem;

  &:after{
    content: "";
    display: block;
    padding-top: 50%; // ratio
  }
}

.svg .box {
  background-color: transparent !important;
}

.box__content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.box__content__logo {
  width: 20%;
  svg {
    display: block;
    * {
      fill: #fff;
    }
  }

  @include if-wider-than(500px) {
    width: 10%;
  }
}

.box__content__headline {
  width: 62%;
  margin-top: .5rem;
  margin-bottom: 0;
  font-size: modular-scale(1rem, 1);
  line-height: 1.3;

  // David: setting breakpoints just based on
  // what looks good depending on our current titles
  // is there a better way?
  // Hjortur: Nope - I think that is the only way.
  @include if-wider-than(450px) {
    max-width: 46%;
    font-size: modular-scale(1rem, 2);
    line-height: 1;
    margin-top: 1rem;
  }

  @include if-wider-than(650px) {
    font-size: modular-scale(1rem, 3);
    margin-top: 2rem;
  }

  @include if-wider-than($breakpoint-two-px) {
    font-size: modular-scale(1rem, 2);
  }

  @include if-wider-than(900px) {
    font-size: modular-scale(1rem, 3);
  }

  @include if-wider-than(1100px) {
    font-size: modular-scale(1rem, 4);
    max-width: 450px;
    margin-top: 3rem;
  }

}

.box__content__cta {
  display: none;
  @include if-wider-than(500px) {
    display: block;
    position: absolute;
    bottom: 11%;
    font-size: modular-scale(1rem, 0);
  }
}

.box__content__img  {
  position: absolute;
  top: 24%; //position under angle on box
  bottom: 0;
  right: 0;
  left: 58%;
  text-align: center;
  overflow: hidden;

  img {
    height: 100%;
    width: auto;
  }
  noscript {
    position: absolute;
    top: 0;
    right: 0;
  }

  @include if-wider-than(450px) {
    top: 3%; //position under angle on box
    bottom: 0;
    right: 0;
    left: 46%;
  }
}

.box__content__img--right {
  text-align: right;
}

.box__content__img--left {
  text-align: left;
}

.box__shape {
  fill: #666;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: $easeOutQuad;
  backface-visibility: hidden;
}
{'fraction_non_alphanumeric': 0.14535003079449804, 'fraction_numerical': 0.039006364196263604, 'mean_word_length': 2.6576576576576576, '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': '1642171', 'n_tokens_mistral': 2048, 'n_tokens_neox': 1855, 'n_words': 446}