@import 'background'
@import 'fullscreen'
@import 'info-tab'
@import 'image'


.image-grid
    padding: 0

    width: 100%
    height: 100vh

    position: relative

    display: flex
    flex-direction: column
    gap: 0.5rem
    z-index: 3

    .image-block
        margin: 0 0 0 25rem
        padding: 0

        width: calc(100% - 25rem)
        height: 100vh

        position: relative

        display: flex
        flex-direction: column
        gap: 0

        z-index: 3
        transition: margin 0.3s cubic-bezier(0.76, 0, 0.17, 1), width 0.3s cubic-bezier(0.76, 0, 0.17, 1)

        .pill-row
            margin-bottom: 0.5rem

    &.collapsed
        .image-block
            margin: 0
            width: 100%


@media (max-width: 1100px)
    .image-grid
        padding: 0.5rem
        height: auto

        .image-block
            margin: 0
            width: 100%
            height: auto

            gap: 0.5rem

            transition: margin 0s, width 0s

            .image-container
                margin: 0 auto
                padding: 0
                max-height: 69vh

                img
                    max-height: 69vh

            .pill-row
                margin-bottom: 0

                #fullscreenImage
                    display: none

    .info-container
        background: transparent
    
    .info-header
        border-radius: $rad $rad 0 0

    .info-tab.collapsed .info-header
        border-radius: $rad