$evo:                           ".evo" !default;

#{$evo}-text-smaller   { font-size: .5em; } // 12px

.evo-masonry {
    column-count: 4;
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}

.masonry-item {
    background: #fff;
    margin: 0 0 1.5em;
    display: inline-block;
    padding: .25rem;
    width: 100%;
}

.masonry-item > figcaption {
     @extend #{$evo}-text-smaller;
     column-break-inside: avoid;
     display: inline-block;
}

@media only screen and (min-width:300px) {
    .evo-masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width:700px) {
    .evo-masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width:900px) {
    .evo-masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width:1100px) {
    .evo-masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width:1300px) {
    .evo-masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
/* make img reponsive  */
.evo-masonry img{
  width: 100%;
}

/* Tooltip container */
.masonry-tooltip {
    position: relative;
    display: inline-block;
    
}

/* Tooltip text */
.masonry-tooltip .masonry-tooltiptext {
    visibility: hidden;
    width: auto;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 1em 1em;
    border-radius: 0;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.masonry-tooltip:hover .masonry-tooltiptext {
    visibility: visible;
}