CrazySquirrel/CSShare

@import "compass/css3";

.cstiles{
    &:after,
    &:before{
        content:"";
        width:100%;
        height:0;
        display:block;
        clear:both;     
    }
    
    .cstiles__item{
        float:left;
        width:0;
        height:0;
        padding:12.5%;
        position:relative;    
        overflow:hidden; 
        font:inherit;
        color:inherit;
        text-decoration:none;
        
        .cstiles__item-image,
        .cstiles__item-video,
        .cstiles__item-content-wrap,
        .cstiles__item-content{
            width:100%;  
            height:100%;
            min-width:0;
            min-height:0; 
            max-width:10000px;
            max-height:10000px;  
            overflow: hidden;
            display:block;
            position:relative;
        }
        .cstiles__item-content-wrap{
            position:absolute;
            left:0;
            top:0;     
        }
        .cstiles__item-content-wrap{
            @include box-sizing(border-box);      
        }
        .cstiles__item-image{
            z-index:1;    
        }
        .cstiles__item-video{
            z-index:1;    
        }
        .cstiles__item-content-wrap{
            z-index:2;    
        }
    }
    
    &.is-auto-fix{
        position:relative;
        width:100%;
        height:auto;    
        
        .cstiles__item{
            position:absolute;
            left:0;
            top:0;    
            z-index:2;
            
            &.is-fixer{
                position:relative;
                width:100%;
                height:0;    
                z-index:1;
            }
        }
    }    
}