davide-casiraghi/laravel-smart-blog

.blogBricklayer{
    margin-top: 20px;
    
    @media screen and (min-width: 300px) {
        
        /* column-width can be set to: 150, 200, 250, 300, 350, 400 */
        @for $i from 3 through 8 {
            $columnWidth: $i * 50;
            &[data-column-width="#{$columnWidth}"]{
                .bricklayer-column-sizer {
                    flex-basis: #{$columnWidth}px;
                }
            }
        }
        
        /* gutter can be set to: 0, 10, 20, 30, 40, 50 */
        @for $i from 0 through 5 {
            $gutter: $i * 10;
            &[data-gutter="#{$gutter}"]{
                .bricklayer-column{
                    padding: 0 #{$gutter/2}px;
                    .box{
                        margin-bottom: #{$gutter}px;
                    }
                }
            }
        }
        
    }

    .box{
        &.animated{
            transition: transform 0.15s linear;
            
            &:hover{
                transform: scale(1.04);
                box-shadow: 0 2px 20px 2px rgba(0,0,0,.45);
            }
        }
        a{
            cursor: zoom-in;
            display: block;
            position: relative;
            
            img{
                width: 100%;
            }
            
            i {
                &.fa-play-circle{
                    position: absolute;
                    top: calc(50% - 25px);
                    left: calc(50% - 25px);
                    color: hsla(0,0%,100%,.8);
                    font-size: 50px;
                }
            }
        }
    }
    
}