.inner__gallery

.my-gallery

.my-gallery__item
  position: relative
  margin: 0
  overflow: hidden
  cursor: pointer
  +MQ(XL)
    height: 50vh
    img
      width: auto
      height: 50vh

.my-gallery__link
  +MQ(XL)
    position: relative
    float: left
    width: 100%
    height: 100%
    overflow: hidden
    text-align: center
    .picture
      +position(absolute, 0 null null 0)
      width: 100%
      height: 100%
      background-repeat: no-repeat
      background-position: center center
      background-size: cover
      transition: background-position .5s
      transition: transform .7s , opacity .5s ease-in-out

.my-gallery__image
  opacity: 1
  +MQ(XL)
    opacity: 0

.my-gallery__description
  +position(absolute, null null 3.4rem 3.4rem)
  width: calc(100% - 6.8rem)
  background-color: rgba($black, 0.1)
  backdrop-filter: blur(20px)
  border-top: 1px solid rgba($white, 0.07)
  border-bottom: 1px solid rgba($white, 0.07)
  border-radius: 4px
  padding: 2.4rem 3.4rem
  text-align: center
  &.opposite
    background-color: rgba($white, 0.05)
  p
    display: none
  +MQ(XL)
    bottom: auto
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: 0
    opacity: 0
    transition: opacity 0.5s
    h4
      position: absolute
      +center
      opacity: 0
      transition: opacity 0.5s
.my-gallery__item
  +MQ(XL)
    .no-touch &:hover
      .my-gallery__description
        opacity: 1
        h4
          opacity: 1

.pswp__caption__center
  padding: 2.2rem
  h4
    font: normal 500 1.8rem/1.2 $default-font
    color: $text-light
    margin-bottom: 1.4rem
    small
      display: block
      margin-top: 0.2rem
      font: normal 300 1.4rem/1.6 $default-font
      color: $text-light-transparent
  p
    font: normal 300 1.4rem/1.6 $default-font
    color: $text-light-transparent

.pswp__counter
  font: normal 500 1.6rem/44px $default-font
  color: $text-light

.pswp__button--close
  opacity: 1

.pswp__button--arrow--left::before, .pswp__button--arrow--right::before
  width: 44px
  height: 44px

.pswp__button--arrow--left:before
  left: 0
  background-position: -132px -44px

.pswp__button--arrow--right:before
  right: 0
  background-position: -88px -44px

.pswp__bg
  background: tint($black, 5%)

.pswp__caption, .pswp__top-bar
  background-color: rgba(0,0,0,.3)

.pswp__button--close
  position: relative
  background-color: $white
  &:active
    opacity: 1