.gallery
    margin: 0
    padding: 0

    width: 100%

    display: grid
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    gap: 0.5rem

@media (max-width: 800px)
    .gallery
        grid-template-columns: auto auto auto

.gallery__item
    margin: 0
    padding: 0

    height: auto

    position: relative

    background: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
    background-size: 1000px 640px
    animation: imgLoading 1.8s linear infinite forwards
    border-radius: $rad

    box-sizing: border-box
    overflow: hidden

    &:after
        content: ""
        display: block
        padding-bottom: 100%

    &:hover
        .gallery__item-info
            opacity: 1
            transform: scale(1)

            h2, p
                opacity: 1

        .gallery__item-image
            transform: scale(1.1)

.gallery__item-info
    margin: 0
    padding: 0.5rem

    width: 100%
    height: 100%

    position: absolute
    left: 0
    bottom: 0

    display: flex
    flex-direction: column
    justify-content: flex-end

    background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))

    z-index: +1

    opacity: 0 // hide
    transform: scale(1.05) // scale up
    transition: all 0.3s cubic-bezier(.79, .14, .15, .86)

    h2
        margin: 0
        padding: 0

        font-size: 1rem
        font-weight: 600

        color: $primary

        text-overflow: ellipsis
        overflow: hidden

        opacity: 0 // hide
        transition: all 0.2s ease-in-out

    p
        margin: 0
        padding: 0

        font-size: 0.8rem
        font-weight: 500

        color: $white

        text-overflow: ellipsis
        overflow: hidden

        opacity: 0 // hide
        transition: all 0.2s ease-in-out

.gallery__item-image
    width: 100%
    height: 100%

    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0

    object-fit: cover
    object-position: center

    background-color: $white

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