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


.one-col-cta-images{
    display: grid;
    gap: 20px;
    @include responsive(desktop){
        grid-template-columns: repeat(12, 82px);
    }
    .wrapper{
        @include responsive(tablet){
            clip-path: polygon(0% 2%, 2% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
        }
        
        @include responsive(desktop){
            clip-path: polygon(0% 2%, 2% 0%, 100% 0%, 100% 10%, 100% 100%, 0% 100%, 0% 3%);
        }
    }
    &.align-left{
        padding: 0px 0px;
        @include responsive(tablet){
            padding: 80px 50px;
        }
        @include responsive(desktop){
            padding: 145px 0;
        }
        .wrapper{
            padding: 50px 35px;
            @include responsive(desktop){
                grid-column: 1 / span 12;
            }
            .heading{
                @include heading--md;
            }
            .text{
                margin-bottom: 10px;
            }
            .cta{
                margin-bottom: 30px;
                @include responsive(desktop){
                    margin-bottom: 40px;
                }
                .btn{
                    margin-left: auto;
                }
            }
            .gallery{
                display: grid;
                grid-template-columns: 205px;
                // grid-template-rows: repeat(auto-fit, 205px);
                grid-template-rows: repeat(auto, minmax(205px, 205px));

                justify-content: center;
                gap: 20px;
                margin-bottom: 40px;
                margin-top: 30px;
                @include responsive(tablet){
                    grid-template-columns: repeat(auto-fit, 205px);
                }
                @include responsive(desktop){
                    // grid-template-rows: 205px;
                    grid-template-columns: repeat(4, 245px);

                }
                &-image{
                    overflow: hidden;
                    // max-height: 205px;
                    &:nth-child(2n){
                        display: none;
                        @include responsive(tablet){
                            display: block;
                        }
                    }
                    img{
                        display: block;
                        object-fit: cover;
                    }
                }

            }
        }
    }
    &.align-center{
        padding: 40px 0;
        .wrapper{
            padding: 26px 20px 0px;
            @include responsive(desktop){
                padding: 50px 90px 9px;
                grid-column: 2 / 12;
            }
            .heading{
                @include heading--md;
                text-align: center;
                @include responsive(tablet){
                    @include heading--xl;
                }
            }
            .text{
                text-align: center;
            }
            .cta{
                margin-bottom: 30px;
                @include responsive(desktop){
                    margin-bottom: 40px;
                }
                .btn{
                    margin: 0 auto;
                }
            }
        }
    }

}
