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


.one-col-cta{
    .wrapper{
        @include responsive(tablet){
            clip-path: polygon(0% 10%, 3% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
        }
        
        @include responsive(desktop){
            clip-path: polygon(0% 10%, 2% 0%, 100% 0%, 100% 2%, 100% 100%, 0% 100%, 0% 12%)
        }
    }
    &.align-left{
        padding: 0px 0px;
        @include responsive(tablet){
            padding: 80px 50px;
        }
        @include responsive(desktop){
            padding: 180px 0;
        }
        .wrapper{
            padding: 50px 35px;
            @include responsive(desktop){
                grid-column: 1 / span 9;
            }
            .heading{
                @include heading--md;
            }
            .text{
                padding-right: 100px;
                margin-bottom: 10px;
            }
            .cta{
                margin-bottom: 30px;
                @include responsive(desktop){
                    margin-bottom: 0px;
                }
                .btn{
                    margin-left: auto;
                }
            }
        }
    }
    &.align-center{
        padding: 40px 0;
        .wrapper{
            padding: 26px 20px 20px;
            @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;
                }
            }
        }
    }
    &.bg-dark{
        background-color: $dark-color;
    }
}
