div.gallery
  margin: $gap-row 0
  overflow: hidden
  $sp = 1px
  >.fancybox,>p>.fancybox
    margin: $sp
    padding: 0
    position: relative
    .image-caption
      opacity: 0
      transform: translateY(100%)
      transition: all 0.3s ease
      pointer-events: none
      position: absolute
      width: 100%
      bottom: 0
      text-align: center
      background: rgba(0, 0, 0, 0.3)
      color: #fff
      &:empty
        display:none
    &:hover
      .image-caption
        opacity: 1
        transform: translateY(0)
  &,>p
    display: flex
    justify-content: center
    align-items: center
    flex-wrap: nowrap
    padding: 0 !important
    align-items: stretch
  &[col]>p
    flex-wrap: wrap
    justify-content: flex-start
  &[col='2']>p>.fancybox
    width: "calc(50% - 2 * %s)" % $sp
  &[col='3']>p>.fancybox
    width: "calc(33.33% - 2 * %s)" % $sp
  &[col='4']>p>.fancybox
    width: "calc(25% - 2 * %s)" % $sp
  &[col='5']>p>.fancybox
    width: "calc(20% - 2 * %s)" % $sp
  &[col='6']>p>.fancybox
    width: "calc(16.66% - 2 * %s)" % $sp
  &[col='7']>p>.fancybox
    width: "calc(14.2857% - 2 * %s)" % $sp
  &[col='8']>p>.fancybox
    width: "calc(12.5% - 2 * %s)" % $sp
  >p
    margin: 0
  &.left,&.left>p
    justify-content: flex-start
  &.center,&.center>p
    justify-content: center
  &.right,&.right>p
    justify-content: flex-end
  &.stretch,&.stretch>p
    align-items: stretch
    img
      transform: scale(1.5)

.fancybox-container
  .fancybox-stage
    cursor: zoom-out

.fancybox
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  flex-wrap: nowrap
  padding: 0 !important
  overflow: hidden
  border-radius: 2px
  @media screen and (max-width: $device-mobile)
    border-radius: 1px
  a
    line-height: 0
    margin: 0
    align-items: stretch
    cursor: zoom-in
  .gallery
    overflow: hidden
  .image-caption
    font-size: $fontsize-code
    padding-top: $gap-row
    padding-bottom: $gap-row
    color: $color-meta