.image-fullscreen
    margin: 0
    padding: 0 0 0 3.5rem

    width: 100%
    height: 100dvh

    position: fixed
    top: -100%
    left: 0

    display: flex
    opacity: 0 // hide

    background-color: rgba($black, 0.8)
    z-index: 21

    box-sizing: border-box

    img
        margin: auto
        padding: 0

        width: auto
        height: auto
        max-width: 100%
        max-height: 100%

        object-fit: contain
        object-position: center

        transform: scale(0.8)

.image-fullscreen__active
    top: 0

    opacity: 1 // show

    transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)

    img
        transform: scale(1)
        transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
.image-fullscreen__hide
    opacity: 0 // hide

    transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)

    img
        transform: scaleY(0) // scale(0.8) 
        transition: transform 0.2s ease