.activity {float:left;margin-left:1.6%;box-sizing:border-box;-moz-box-sizing:border-box;position:relative;height:220px;background:#999;border-radius:3px 3px 5px 5px;margin-bottom:15px;cursor:pointer;background-size:cover;background-position:center;
transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-webkit-transition:  opacity 0.3s;
-o-transition:  opacity 0.3s;
}
#activities > div > a:first-child .activity {margin-left:0;}
#activities {overflow:auto;}
.activity.one {width:40.4%;}
.activity.two {width:58%;}
.activity h2 {position:absolute;bottom:0px;right:0px;color:#fff;background:#444;margin:0;padding:8px 10px 10px;border-radius:0 0 3px 3px;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;background:rgba(0,0,0,0.7);text-align:right;}
.activity:first-child h2 {text-align:left;}
#activities:hover .activity {opacity:0.8;}
.activity:hover {opacity:1 !important;}

@media screen and (max-width: 768px) { 
.activity {margin-left:0;}
.activity.one, .activity.two {width:100%;}
}