.gallery
    margin: 0
    padding: 0

    width: 100%

    display: grid
    grid-template-columns: auto auto auto auto auto auto
    gap: 0.5rem

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

@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%

.gallery__item-info
    margin: 0
    padding: 0

    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.5s cubic-bezier(.79, .14, .15, .86)

    h2
        margin: 0
        padding: 0 1rem 0.5rem

        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 1rem 0.5rem

        font-size: 0.8rem
        font-weight: 500

        color: $white

        text-overflow: ellipsis
        overflow: hidden

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

    &:hover
        opacity: 1
        transform: scale(1)

        h2, p
            opacity: 1

.gallery__item-image
        margin: 0
        padding: 0

        width: 100%
        height: 100%

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

        object-fit: cover
        object-position: center

        //background-color: $black
        border-radius: $rad