.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
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)