/*

Lesli

Copyright (c) 2023, Lesli Technologies, S. A.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see http://www.gnu.org/licenses/.

Lesli · Ruby on Rails SaaS development platform.

Made with ♥ by https://www.lesli.tech
Building a better future, one line of code at a time.

@contact  hello@lesli.tech
@website  https://www.lesli.tech
@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html

// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
// ·  

*/


// · 
.lesli-gallery {
    min-height: auto;
    height: 100%;
    width: 100%;
    position: relative;
    .grid {
        height: auto;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, 150px);
        gap: 18px;
        .item {
            width: 150px;
            height: 150px;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            span { 
                position: absolute;
                top: 5px;
                right: 5px;
                cursor: pointer;
                background: white;
                border-radius: 50%;
            }
        }
    }
    .slider {
        height: 100%;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        &-controls {
            position: absolute;
            bottom: 20px;
            left: 10px;
            display: flex;
            align-items: center;
            .info {
                color: white;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
                font-size: 24px;
                margin-left: 16px;
            }
            button {
                &:first-child {
                    margin-right: 5px;
                }
                .icon {
                    margin: 0 !important;
                }
            }
        }
    }
}