@import '_mixins';

@include woolook-collection-one;

.woolook-collection-one{

    .woolook-items{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 15px;
        min-height: 570px;
    }

}

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

    .woolook-collection-one{
        &[data-mobile="1"] .woolook-items{
            grid-template-columns: 1fr;
            min-height: 900px;
        }

        &[data-mobile="2"] .woolook-items{
            grid-template-columns: 1fr 1fr;

            .woolook-item{
                &:nth-child(1){
                    grid-column: 1/2;
                    grid-row: 1/3;
                }
        
                &:nth-child(2){
                    grid-column: 2/3;
                    grid-row: 1/2;
                }
        
                &:nth-child(3){
                    grid-column: 2/3;
                    grid-row: 2/3;
                }
            }
        }
    }

}

@media screen and ( min-width: $tablet ){
    .woolook-collection-one{
        &[data-tablet="1"] .woolook-items{
            grid-template-columns: 1fr;
            min-height: 900px;
        }

        &[data-tablet="2"] .woolook-items{
            grid-template-columns: 1fr 1fr;

            .woolook-item{
                &:nth-child(1){
                    grid-column: 1/2;
                    grid-row: 1/3;
                }
        
                &:nth-child(2){
                    grid-column: 2/3;
                    grid-row: 1/2;
                }
        
                &:nth-child(3){
                    grid-column: 2/3;
                    grid-row: 2/3;
                }
            }
        }
    }
}

@media screen and ( min-width: $desktop ){
    .woolook-collection-one{
        &[data-desktop="1"] .woolook-items{
            grid-template-columns: 1fr;
            min-height: 900px;
        }

        &[data-desktop="2"] .woolook-items{
            grid-template-columns: 1fr 1fr;

            .woolook-item{
                &:nth-child(1){
                    grid-column: 1/2;
                    grid-row: 1/3;
                }
        
                &:nth-child(2){
                    grid-column: 2/3;
                    grid-row: 1/2;
                }
        
                &:nth-child(3){
                    grid-column: 2/3;
                    grid-row: 2/3;
                }
            }
        }
    }
}