:root {
    --border-radius: 4px;
    --border-color: #e6e6e6;
    --hover-border-color: #6d6d6d;
    --background-color: #ffffff;
    --hover-background: #f2f2f2;
    --font-color-light: #c7c9c2;
    --font-size-large: 24px;
    --gallery-gap: 10px;
    --gallery-columns-desktop: 4;
    --gallery-columns-laptop: 3;
    --gallery-columns-tablet: 2;
    --gallery-mobile-image-size: 80px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;


    &.gallery-panoramic {
        > div {
            flex-basis: 455px;

            .img {
                display: flex;
                justify-content: space-around;

                > div {
                    display: flex;
                    width: 50%;
                    justify-content: center;
                    height: 100%;
                    align-items: center;
                }
            }
        }
    }


    &.gallery-mobile {
        & > div {
            flex-direction: row;
            
            .img {
                width: var(--gallery-mobile-image-size);
                min-width: var(--gallery-mobile-image-size);
                height: var(--gallery-mobile-image-size);
                min-height: var(--gallery-mobile-image-size);
                max-height: var(--gallery-mobile-image-size);
                margin-right: 10px;
                aspect-ratio: 1/1;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            
            .content {
                flex: 1;
                border-bottom: none;
                
            }
        }
    }


    > div {
        /*margin-bottom: 10px;*/
        flex-basis: auto;
        width: auto;
        margin: 0 10px 20px 0;
        border-radius: var(--border-radius);
        border: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        position: relative;

        &.active {
            border: 1px solid var(--hover-border-color);
        }

        &.muted {
            border: 1px solid var(--border-color);
            opacity: 0.3;
        }

        .status {
            .circle {
                position: absolute;
                margin: 10px;
                border-radius: 50%;
                width: 15px;
                height: 15px;
                display: block;
                border: 1px solid var(--border-color);

                &:hover {
                    border: 1px solid var(--hover-border-color);
                }
            }
        }

        .quantity {
            position: absolute;
            margin: 9px 0 0 223px;
            opacity: 0.5;
            font-size: var(--font-size-large);
            color: var(--font-color-light);
        }

        .alert {
            margin-left: auto;
            line-height: normal;
            padding: 20px 40px 20px 20px;
            text-align: center;
            position: absolute;
            width: 100%;
            font-weight: bold;
            height: auto;
        }

        .img {
            background-size: cover;
            background: center var(--background-color);
            justify-content: center;
            display: flex;
            align-items: center;
        }

        img {
            width: 150px;
            object-fit: contain;
            /*padding: 10px;*/
        }

        .content {
            display: flex;
            flex-direction: row;
            padding: 10px;
            border-bottom: 1px dashed var(--border-color);
            padding-bottom: 8px;

            &:last-child {
                border-bottom: none;
                margin-bottom: 8px;
                padding-bottom: 0;
            }
            
            &:nth-child(2) {
                flex-direction: column;
            }

            .title,

            h4 {
                font-weight: bold;
                margin-top: 0;
                font-size: 16px;
                line-height: 13px;
            }

            > div {
                display: flex;
                &.right {
                    margin-left: auto;
                }
            }
        }

        &:hover {
            background: var(--hover-background);
        }
    }
}


@media (max-width: 767px) {
    :root {
        --image-size: 70px;
        --border-radius: 2px;
    }

    .gallery {
        flex-direction: column;
        
        & > div {
            flex-basis: 100%;
            width: 100%;
            margin: 0 0 10px 0;
            
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;

            & > a.img {
                height: auto;
                display: block;
                margin: 0;
                padding: 0;
                border-radius: var(--border-radius);

                & img {
                    border-radius: var(--border-radius);
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            .content {
                width: 100%;
                padding: 10px;
            }

            .actions {
                width: 100%;
                padding: 0 10px 10px 10px;
            }
        }

    }
}


@media (min-width: 767px) {
    .gallery {
        & > div {
            width: calc((100% / var(--gallery-columns-laptop)) - var(--gallery-gap));
            flex-basis: calc((100% / var(--gallery-columns-laptop)) - var(--gallery-gap));
            
            & > a:first-child {
                border-bottom: 1px dashed var(--border-color);
            }

            margin-top: auto;
        }
    }
}

@media (min-width: 1200px) {
    .gallery {
        & > div {
            width: calc((100% / var(--gallery-columns-desktop)) - var(--gallery-gap));
            flex-basis: calc((100% / var(--gallery-columns-desktop)) - var(--gallery-gap));
        }
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .gallery {
        & > div {
            width: calc((100% / var(--gallery-columns-tablet)) - var(--gallery-gap));
            flex-basis: calc((100% / var(--gallery-columns-tablet)) - var(--gallery-gap));
        }
    }
}