#list
{
    width: 100%;
    overflow: hidden;
    margin-bottom: -1.875em; /* 30px */
    -webkit-column-count: 3;
    -webkit-column-gap: 1.875em; /* 30px */
    -webkit-column-fill: balance;
    -moz-column-count: 3;
    -moz-column-gap: 1.875em; /* 30px */
    -moz-column-fill: balance;
    column-count: 3;
    column-gap: 1.875em; /* 30px */
    column-fill: balance;
}
    .item
    {       
    width:300px; 
    min-height:120px;    
    padding:10px;
    border:1px solid #EAEAEA; 
        margin:0px 0px 30px 0px;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        column-break-inside: avoid;    

    }
 
@media only screen and ( max-width: 40em ) /* 640px */
{
    #list
    {
        -webkit-column-count: 1;
        -webkit-column-gap: 0.938em; /* 15px */
        -moz-column-count: 1;
        -moz-column-gap: 0.938em; /* 15px */
        column-count: 1;
        column-gap: 0.938em; /* 15px */
    }
        .item
        {
            margin-bottom: 0.938em; /* 15px */
        }
}
@media only screen and ( max-width: 20em ) /* 320px */
{
    #list
    {
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;
    }
}

     #list:hover .item:not(:hover) {
	opacity: 0.4;
}