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


.section-boxes-repeater{
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    .bg-filter{
        @include bg-filter;
    }
    .wrapper{
        position: relative;
        padding-top: 46px;
        padding-bottom: 46px;
        z-index: 99;
        @include responsive(desktop){
            padding: 146px 0;
        }
        .section-heading{
            max-width: 520px;
            @include responsive(desktop){
                margin-left: 32px;
            }
        }
        .section-description{
            @include responsive(desktop){
                max-width: 60%;
                margin-left: 32px;
            }
        }
        .boxes{
            display: grid;
            justify-content: center;
            gap: 20px;
            @include responsive(desktop){
                padding: 14px 50px 0;
                grid-template-columns: repeat(auto-fit,minmax(244px,1fr));
            }
            .box-single{
                background-color: $gray-color;
                clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
                padding: 30px 22px 15px;
                @include responsive(tablet){
                    clip-path: polygon(0% 12%, 2% 0%, 100% 0%, 100% 2%, 100% 100%, 0% 100%, 0% 12%);
                }
                @include responsive(desktop){
                    padding: 40px 22px 30px;
                    clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
                }
                .box-image{
                    max-width: 40px;
                    max-height: 40px;
                    aspect-ratio: 1/1;
                    margin-bottom: 22px;
                }
                .box-content{
                    display: grid;
                    grid-template-rows: auto 1fr auto;
                    height: 100%;
                    .cta{
                        align-self: end;
                        text-align: end;
                    }
                }
            }
        }
    }
    &.bg-dark{
        .wrapper{
            .boxes.numbered-cards{
                display: flex;
                flex-direction: column;
                position: relative;
                gap: 20px;
                counter-reset: box-counter;
                @include responsive(desktop){
                    flex-direction: row;
                    padding: 14px 0 0;
                }
                .box-single{
                    clip-path: inherit;
                    padding: inherit;
                    background-color: inherit;
                    @include responsive(tablet){
                        display: flex;
                        flex-direction: column;
                    }
                    @include responsive(desktop){
                        min-height: 420px;
                        height: fit-content;
                        padding: inherit;
                        flex: 0 0 33%;
                    }
                    .box-content{
                        display: grid;
                        grid-template-rows: auto;
                        height: auto;
                        min-height: 300px;
                        background-color: $gray-color;
                        clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
                        padding: 43px 40px;
                        @include responsive(tablet){
                            min-height: inherit;
                            flex: 1 0 205px;
                            clip-path: polygon(0% 10%, 3% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
                        }
                        @include responsive(desktop){
                            flex: 1 0 395px;
                            clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
                        }
                        &__text{
                            color: $dark-color;
                            @include responsive(tablet){
                                margin-bottom: 10px;
                            }
                            @include responsive(desktop){
                                margin-bootom: inherit;
                            }
                        }
                    }
                    .box-counter{
                        color: $accent-color;
                        font-size: 7.2rem;
                        font-weight: 700;
                        line-height: 110%;
                        margin-left: 16px;
                        &:before{
                            content: "0" counter(box-counter);
                            counter-increment: box-counter;
                        }
                    }
                }
            }
        }        
    }
}