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


.image-grid
    padding: 0

    width: 100%
    height: 100vh

    position: relative

    display: flex
    flex-direction: column
    z-index: 3

    .image-block
        margin: 0 0 0 27rem
        padding: 0.5rem

        width: calc(100% - 27rem)
        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-top: 0.5rem

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

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

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

            width: 100%
            height: auto

            transition: margin 0s, width 0s

            .pill-row
                #fullscreenImage
                    display: none