.gallery-header
    margin: 0.5rem
    padding: 0

    width: 100%

    display: flex
    flex-direction: row
    justify-content: flex-start

    font-size: 2rem
    font-weight: 700
    
.gallery-grid
    width: 100%

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

.gallery-item
    position: relative

    border-radius: calc(var(--rad) / 2)
    box-shadow: 0 0.15rem 0.4rem 0.1rem var(--black-transparent)

    box-sizing: border-box
    overflow: hidden
    transition: box-shadow 0.2s var(--animation-smooth)

    .image-filter
        margin: 0
        padding: 0.5rem

        width: 100%
        min-height: 30%
        height: auto

        position: absolute
        inset: 0

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

        background-image: linear-gradient(to top, var(--black-transparent), transparent)
        opacity: 0 // hide

        z-index: +4
        transition: opacity 0.2s var(--animation-smooth)

        .image-title,
        .image-subtitle
            margin: 0
            padding: 0

            white-space: nowrap
            text-overflow: ellipsis
            overflow: hidden

            color: var(--foreground-white)
            text-shadow: 0 0 2px var(--foreground-black)

        .image-title
            font-size: 0.9rem
            font-weight: 700

        .image-subtitle
            font-size: 0.8rem
            font-weight: 400

    img
        width: 100%
        height: 100%

        position: absolute
        inset: 0

        object-fit: cover
        object-position: center

        background-color: var(--background-bright)

    &:hover
        box-shadow: 0 0.2rem 0.4rem 0.1rem var(--black-transparent)

        .image-filter
            opacity: 1

.group-item
    padding: 0

    position: relative

    border-radius: calc(var(--rad) / 2)

    box-sizing: border-box
    overflow: hidden

    .image-filter
        margin: 0
        padding: 0.5rem

        width: 100%
        min-height: 30%
        height: auto

        position: absolute
        left: 0
        bottom: 0

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

        background-image: linear-gradient(to top, var(--black-transparent), transparent)

        z-index: +4

        .image-title,
        .image-subtitle
            margin: 0
            padding: 0

            white-space: nowrap
            text-overflow: ellipsis
            overflow: hidden

            color: var(--foreground-white)
            text-shadow: 0 0 2px var(--foreground-black)

        .image-title
            font-size: 0.9rem
            font-weight: 700

        .image-subtitle
            font-size: 0.8rem
            font-weight: 400

    .images
        margin: 0
        padding: 0

        width: 100%
        height: 100%

        position: absolute
        inset: 0

        display: block

        img
            width: 100%
            height: 100%

            position: absolute
            inset: 0

            object-fit: cover
            object-position: center

            background-color: var(--background-800)
            border-radius: calc(var(--rad) / 2)
            box-shadow: 0 0 0.4rem 0.25rem var(--black-transparent)

            transition: transform 0.2s var(--animation-smooth)

        &.size-1
            .data-1
                transform: scale(0.8) rotate(3deg)

        &.size-2
            .data-1
                transform: scale(0.7) rotate(-3deg) translate(10%, 10%)
                z-index: +2
            .data-2
                transform: scale(0.7) rotate(3deg) translate(-10%, -10%)
                z-index: +1

        &.size-3
            .data-1
                transform: scale(0.6) rotate(3deg) translate(-25%, 25%)
                z-index: +3
            .data-2
                transform: scale(0.6) rotate(-5deg) translate(25%, 10%)
                z-index: +2
            .data-3
                transform: scale(0.6) rotate(-1deg) translate(-15%, -23%)
                z-index: +1

    &:hover
        .images
            &.size-1
                .data-1
                    transform: scale(0.9) rotate(0deg)

            &.size-2
                .data-1
                    transform: scale(0.75) rotate(-1deg) translate(12%, 14%)
                    z-index: +2
                .data-2
                    transform: scale(0.75) rotate(1deg) translate(-12%, -10%)
                    z-index: +1

            &.size-3
                .data-1
                    transform: scale(0.65) rotate(1deg) translate(-24%, 24%)
                    z-index: +3
                .data-2
                    transform: scale(0.65) rotate(-2deg) translate(24%, 10%)
                    z-index: +2
                .data-3
                    transform: scale(0.65) rotate(0deg) translate(-15%, -25%)
                    z-index: +1
            
@media (max-width: 800px)
    .gallery-grid
        grid-template-columns: auto auto auto

    .gallery-item
        margin: 0.1rem
        position: relative