@import '_mixins';

@include woolook-layout-2;

// extra small breakpoint
.woolook-layout-2{
    .woolook-item{
        flex-basis: 100%; // overrides the editor style
        max-width: 100%;
    }

}

@media screen and ( min-width: $mobile ){

    .woolook-layout-2{

        &[data-mobile="1"]{
            .woolook-item{
                flex-basis: 100%;
                max-width: 100%;
            }
        }

        &[data-mobile="2"]{
            .woolook-item{
                flex-basis: 50%;
                max-width: 50%;
            }
        }

        &[data-mobile="3"]{
            .woolook-item{
                flex-basis: 33.3332%;
                max-width: 33.3332%;
            }
        }

        &[data-mobile="4"]{
            .woolook-item{
                flex-basis: 25%;
                max-width: 25%;
            }
        }

        &[data-mobile="5"]{
            .woolook-item{
                flex-basis: 20%;
                max-width: 20%;
            }
        }

    }

}

@media screen and ( min-width: $tablet ){

    .woolook-layout-2{

        &[data-tablet="1"]{
            .woolook-item{
                flex-basis: 100%;
                max-width: 100%;
            }
        }

        &[data-tablet="2"]{
            .woolook-item{
                flex-basis: 50%;
                max-width: 50%;
            }
        }

        &[data-tablet="3"]{
            .woolook-item{
                flex-basis: 33.3332%;
                max-width: 33.3332%;
            }
        }

        &[data-tablet="4"]{
            .woolook-item{
                flex-basis: 25%;
                max-width: 25%;
            }
        }

        &[data-tablet="5"]{
            .woolook-item{
                flex-basis: 20%;
                max-width: 20%;
            }
        }

    }

}

@media screen and ( min-width: $desktop ){

    .woolook-layout-2{

        &[data-desktop="1"]{
            .woolook-item{
                flex-basis: 100%;
                max-width: 100%;
            }
        }

        &[data-desktop="2"]{
            .woolook-item{
                flex-basis: 50%;
                max-width: 50%;
            }
        }

        &[data-desktop="3"]{
            .woolook-item{
                flex-basis: 33.3332%;
                max-width: 33.3332%;
            }
        }

        &[data-desktop="4"]{
            .woolook-item{
                flex-basis: 25%;
                max-width: 25%;
            }
        }

        &[data-desktop="5"]{
            .woolook-item{
                flex-basis: 20%;
                max-width: 20%;
            }
        }

    }

}