.inner
  +position(absolute, 0 null null 0)
  width: 100%
  min-width: 360px
  height: 100%
  background-color: $base-color
  overflow-y: auto
  z-index: 1
  &::after
    content: ""
    display: block
    +position(absolute, 0 null null 0)
    width: 100%
    height: 100%
    background-color: $black
  +MQ(XL)
    height: 100%
    padding-top: 0
    overflow: hidden

.inner__content
  position: relative
  padding-top: 80px
  +MQ(XL)
    padding-top: 0

.inner__info,
.inner__media
  position: relative
  +MQ(XL)
    height: 100%

.inner__media
  height: 80vh
  min-height: 600px
  +MQ(XL)
    height: 100%

.blocks-container
  padding: 80px 0
  +MQ(XL)
    position: absolute
    left: 0
    +center(y)
    width: 100%
    padding: 0

.media-container
  position: relative
  overflow: hidden
  height: 100%
  &.portfolio-container
    height: auto
  +MQ(XL)
    height: 100%
    &.portfolio-container
      height: 100%

.content-block
  padding: 0 3.4rem
  margin-bottom: 5rem
  &:last-of-type
    margin-bottom: 0
  +MQ(XL)
    padding: 0 6rem
  +MQ(XXL)
    padding: 0 8rem

.image
  position: relative
  height: 100%
  background-repeat: no-repeat
  background-position: center
  background-size: cover

.image-caption
  +position(absolute, null null 3.4rem 3.4rem)
  width: calc(100% - 6.8rem)
  background-color: rgba($white, 0.05)
  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($black, 0.1)
  +MQ(M)
    width: auto
    text-align: left
  +MQ(XL)
    left: 6rem
    bottom: 11rem
    padding: 0
    background-color: transparent
    backdrop-filter: none
    border: none
    &.opposite
      background-color: transparent
  +MQ(XXL)
    left: 8rem
    bottom: 12rem