[class*="span"] {
    display: inline-block;
    margin-right: -0.3rem;
    margin-bottom: 15px;
    vertical-align: top;
}
.span1 {
    width: 100%;
}
.span2 {
    width: 50%;
}
.span3 {
    width: 33.33333333333333%;
}
.span3-2 {
    width: 66.66666666666666%;
}
.span4 {
    width: 25%;
}
.span4.1 {
    width: 24%;
}
.span5 {
    width: 20%;
}
.span6 {
    width: 33%;
}
.span-left {
    padding-right: 10px;
}
.span-right {
    padding-left: 10px;
}

@media(max-width: 979px) {
    
}

@media(max-width: 767px) {
    [class*="span"] {
        width: 100%;
    }
    .span4 {
        width: 33.33333333333333%;
    }
    .span2 {
        width: 50%;
    }
    .span-left,
    .span-right {
        padding: 0;
    }
}

@media(max-width: 640px) {
    .span4 {
        width: 50%;
    }
    .span2 {
        width: 100%;
    }
}

@media(max-width: 479px) {
    [class*="span"] {
        width: 100%;
    }
}