@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;
@use "../02-abstracts/mixins" as *;

.section-gallery{
    padding: 45px 0;
    @include responsive(desktop){
        padding: 55px 0 145px;
    }
    .wrapper{
        .section-heading{
            @include responsive(desktop){
                margin-bottom: 55px;
            }
        }
        .gallery{
            display: grid;
            grid-template-columns: 320px;
            grid-template-rows: repeat(auto-fill, 260px);
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
            @include responsive(desktop){
                display: grid;
                grid-template-columns: repeat(4, 285px);
                justify-content: inherit;
                gap: 20px;
                margin-bottom: 60px;
            }
            &-image{
                overflow: hidden;
                cursor: pointer;
                &:nth-child(1){
                    @include responsive(tablet){
                        grid-column: 1 / span 2;
                        grid-row: 1 / 2;
                    }
                }
                &:nth-child(2){
                    @include responsive(tablet){
                        grid-column: 3 / span 2;
                        grid-row: 1 / span 2;
                    }
                }
                &:nth-child(3){
                    display: none;
                    @include responsive(tablet){
                        display: block;
                        grid-column: 1 / 2;
                        grid-row: 2 / span 1;
                    }
                }
                &:nth-child(4){
                    display: none;
                    @include responsive(tablet){
                        display: block;
                        grid-column: 2 / 3;
                        grid-row: 2 / span 1;
                    }
                }
                &:nth-child(5){
                    display: none;
                    @include responsive(tablet){
                        display: block;
                        grid-column: 1 / 3;
                        grid-row: 3 / 5;
                    }
                }
                &:nth-child(6){
                    display: none;
                    @include responsive(tablet){
                        display: block;
                        grid-column: 3 / 5;
                        grid-row: 3 / 5;
                    }
                }
                img{
                    display: block;
                    width: 100%;
                    height: 101%;
                    object-fit: cover;
                    transition: transform 400ms ease-out;
                    &:hover{
                        transform: scale(1.05);
                    }
                }
            }
        }
        .cta{
            display: flex;
            justify-content: center;
            @include responsive(desktop){
            }
        }
    }
}