<commit_before>$ad-width: 300px
$footer-height: 250px

.gallery
  margin: auto
  transition: left .5s ease

.gallery__controls
  top: 0
  left: 0
  margin: 0 auto
  width: 80%
  .gallery-box &
    top: 120px

.gallery__viewport
  background-color: $titlegray

.gallery__container
  position: relative
  margin: auto
  +respond-to(wide-view)
    width: $fluid-layout-width
    .slider--4x3 &
      padding-top: percentage((1 / 4) * 3 * .8)
    .slider--16x9 &
      padding-top: percentage((1 / 16) * 9 * .8)

.gallery__slide
  &.is-loading.is-current:after
    content: " "
    position: absolute
    top: 50%
    left: 50%
    width: 1em
    height: 1em
    margin: -0.5em 0 0 -0.5em
    background: rgba(125, 125, 125, 0.5)
    border-radius: 100%
    animation: discmove 2s cubic-bezier(0.6, 1, 1, 1) infinite
  &.is-current:hover .social__item--pinned
    opacity: 1

.gallery__img
  &, & > img
    display: block
    min-height: 100%
    width: 100%

.gallery__img--portrait
  &, & > img
    display: block
    height: 100%
    margin: auto
    width: auto

.gallery__title
  +font-size(24)
  color: $body-copy
  padding-bottom: 10px
  .responsive &
    +font-size(20)
    +respond-to(768)
      +font-size(22)
    +respond-to(1000)
      +font-size(24)

.gallery__breadcrumb
  +font-size(14)
  font-weight: bold
  line-height: 2
  text-transform: uppercase
  .responsive &
    +font-size(11)
    line-height: 1
    +respond-to(480)
      +font-size(12)
    +respond-to(768)
      +font-size(14)
    +respond-to(1000)
      line-height: 2

  &:before
    +size(14px)
    display: inline-block
    vertical-align: middle

.gallery__breadcrumb-item
  color: $body-copy
  &:after
    content: " / "
  &:last-child:after
    content: ""

.gallery__footer
  background: white
  margin: auto
  min-height: $footer-height
  overflow: hidden

.gallery__footer__wrapper
  +respond-to(wide-view)
    max-width: $fluid-layout-width
    overflow: hidden
    margin: 0 auto

.gallery__description
  background: white
  border-radius: 0 0 0 4px
  box-sizing: border-box
  float: left
  max-width: 50em
  min-height: $footer-height
  padding: 20px 20px 0 20px
  position: relative

.gallery__social .sharing
  padding: 10px 0 20px 0
  border-top: none
  .split--right
    display: none
  .sharing__label
    display: none
  .facebook-like
    margin-left: 0

.gallery__subject-lead-in
  +font-size(14)
  color: $darkblue
  font-weight: bold
  line-height: 1.5
  text-transform: uppercase

.gallery__poi
  margin-bottom: 10px

.gallery__poi-title
  +font-size(16)
  color: $body-copy
  font-weight: bold
  line-height: 2
  &:before
    display: inline-block
    height: 24px
    margin-right: 2px
    vertical-align: middle
    width: 20px

.gallery__quote
  +font-size(14)
  border-left-style: solid
  border-left-width: 2px
  line-height: 1.2
  margin-left: 9px
  padding: 5px 10px 5px 15px
  width: 95%

  @for $i from 1 through length($poi-names)
    $type: nth($poi-names, $i)
    &.gallery__quote--#{$type}
      border-color: nth($poi-colors, $i)

.gallery__poi-more
  color: $body-copy
  font-style: italic
  font-weight: bold

.gallery__mpu
  background: white
  display: block
  float: right
  height: $footer-height
  width: $ad-width
  .responsive &
    display: none
    +respond-to(480)
      display: block

.gallery-underlay
  +z-layer(middle)
  background: $body-background
  background: rgba($body-background, 0.95)
  bottom: 0
  left: 0
  opacity: 0
  position: fixed
  right: 0
  top: 0
  transition: opacity 1s
  &.is-active
    opacity: 1

.gallery-box
  +z-layer(modal)
  left: 0<commit_msg>Refactor the mpu layout in the image gallery<commit_after>$ad-width: 300px
$footer-height: 250px

.gallery
  margin: auto
  transition: left .5s ease

.gallery__controls
  top: 0
  left: 0
  margin: 0 auto
  width: 80%
  .gallery-box &
    top: 120px

.gallery__viewport
  background-color: $titlegray

.gallery__container
  position: relative
  margin: auto
  +respond-to(wide-view)
    width: $fluid-layout-width
    .slider--4x3 &
      padding-top: percentage((1 / 4) * 3 * .8)
    .slider--16x9 &
      padding-top: percentage((1 / 16) * 9 * .8)

.gallery__slide
  &.is-loading.is-current:after
    content: " "
    position: absolute
    top: 50%
    left: 50%
    width: 1em
    height: 1em
    margin: -0.5em 0 0 -0.5em
    background: rgba(125, 125, 125, 0.5)
    border-radius: 100%
    animation: discmove 2s cubic-bezier(0.6, 1, 1, 1) infinite
  &.is-current:hover .social__item--pinned
    opacity: 1

.gallery__img
  &, & > img
    display: block
    min-height: 100%
    width: 100%

.gallery__img--portrait
  &, & > img
    display: block
    height: 100%
    margin: auto
    width: auto

.gallery__title
  +font-size(24)
  color: $body-copy
  padding-bottom: 10px
  .responsive &
    +font-size(20)
    +respond-to(768)
      +font-size(22)
    +respond-to(1000)
      +font-size(24)

.gallery__breadcrumb
  +font-size(14)
  font-weight: bold
  line-height: 2
  text-transform: uppercase
  .responsive &
    +font-size(11)
    line-height: 1
    +respond-to(480)
      +font-size(12)
    +respond-to(768)
      +font-size(14)
    +respond-to(1000)
      line-height: 2

  &:before
    +size(14px)
    display: inline-block
    vertical-align: middle

.gallery__breadcrumb-item
  color: $body-copy
  &:after
    content: " / "
  &:last-child:after
    content: ""

.gallery__footer
  background: white
  margin: auto
  min-height: $footer-height
  overflow: hidden

.gallery__footer__wrapper
  +respond-to(wide-view)
    max-width: $fluid-layout-width
    overflow: hidden
    margin: 0 auto
    position: relative

.gallery__description
  +z-layer
  background: white
  border-radius: 0 0 0 4px
  max-width: 50em
  min-height: $footer-height
  padding: 20px 20px 0 20px
  position: relative
  +respond-to(wide-view)
    padding-right: 20px + $ad-width

.gallery__social .sharing
  padding: 10px 0 20px 0
  border-top: none
  .split--right
    display: none
  .sharing__label
    display: none
  .facebook-like
    margin-left: 0

.gallery__subject-lead-in
  +font-size(14)
  color: $darkblue
  font-weight: bold
  line-height: 1.5
  text-transform: uppercase

.gallery__poi
  margin-bottom: 10px

.gallery__poi-title
  +font-size(16)
  color: $body-copy
  font-weight: bold
  line-height: 2
  &:before
    display: inline-block
    height: 24px
    margin-right: 2px
    vertical-align: middle
    width: 20px

.gallery__quote
  +font-size(14)
  border-left-style: solid
  border-left-width: 2px
  line-height: 1.2
  margin-left: 9px
  padding: 5px 10px 5px 15px
  width: 95%

  @for $i from 1 through length($poi-names)
    $type: nth($poi-names, $i)
    &.gallery__quote--#{$type}
      border-color: nth($poi-colors, $i)

.gallery__poi-more
  color: $body-copy
  font-style: italic
  font-weight: bold

.gallery__mpu
  +z-layer(middle)
  background: white
  display: block
  height: $footer-height
  width: $ad-width
  .responsive &
    display: none
    +respond-to(strip-unit($ad-width))
      display: block
      margin: 0 auto 20px
    +respond-to(wide-view)
      margin: 0
      position: absolute
      right: 0
      top: 0

.gallery-underlay
  +z-layer(middle)
  background: $body-background
  background: rgba($body-background, 0.95)
  bottom: 0
  left: 0
  opacity: 0
  position: fixed
  right: 0
  top: 0
  transition: opacity 1s
  &.is-active
    opacity: 1

.gallery-box
  +z-layer(modal)
  left: 0
{'fraction_non_alphanumeric': 0.12249562995831653, 'fraction_numerical': 0.04773430146564475, 'mean_word_length': 2.726452905811623, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '7581482', 'n_tokens_mistral': 3117, 'n_tokens_neox': 2754, 'n_words': 661}