.img-wrap

display: flex
justify-content: center
position: relative
object-fit: cover

overflow: hidden
max-width: 100%

img
    max-width: 100vw
    @include media-query('md')
        max-width: 100%

a > *
    max-width: 80%

.gallery .img-wrap

margin: 0
width: 100%
height: 0
padding-top: 100%
img, a
    position: absolute
    top: 0em
    height: 100%
    width: auto

@include media-query('md')

.layout\:post .img-wrap
    width: 33%

.img-wrap.float-left
    margin-right: var(--x)
    margin-bottom: var(--x)
.img-wrap.float-right
    margin-left: var(--x)
    margin-bottom: var(--x)

.img-wrap a

transition: transform .5s ease-in-out .2s, opacity .5s ease-in-out .2s
color: var(--scribe-white) !important
&:hover, &:focus
    color: var(--scribe-white) !important
    text-decoration: none
display: flex
width: 100%
background-color: #000a
opacity: 0.0
div
    margin: auto

.img-wrap, .img-wrap

transform: scale(1)
transition: transform .2s .05s

img
    transform: scale(1)
    transition: transform .5s .05s

.img-wrap:hover:not(), .img-wrap:hover:not()

transform: scale(1.05)
img
    transform: scale(1.1)
a
    opacity: 1.0
    transform: scale(1.02)