.border-box{box-sizing:border-box;-moz-box-sizing:border-box} .clearfix:after{content:'';display:table;clear:both} .ragged{width:32rem;height:24rem;background-size:cover} .ragged h2.title{font-family:RoadRadio, sans-serif;font-size:1.5rem;background:rgba(0,168,236,0.8);transition:all .25s ease-out;-webkit-transition:all .25s ease-out} .ragged .summary{margin-top:3rem} .ragged .date{font-size:12px;opacity:.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";padding:5px} .ragged:hover .title{background:#00a8ec} @media (max-width:800px){.ragged{width:28rem;height:20rem}}@media (max-width:400px){.ragged{width:23rem;height:16rem}}.catalog-dirs .dir{width:50%;min-height:200px;max-width:320px} .catalog-dirs .dir .card{min-height:200px} .catalog-dirs .dir .title{width:100%;z-index:100;font-size:24px;color:#fff !important;background:rgba(0,0,0,0.5);transition:all .25s ease-out;-webkit-transition:all .25s ease-out} .catalog-dirs .dir .image{width:100%} .catalog-dirs .dir .image img{height:200px;max-width:100%;object-fit:cover} .catalog-dirs .dir .summary{min-height:50px} .catalog-dirs .dir:hover .title{top:0px;opacity:.75;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"} .catalog-dirs .dir:hover .title:hover{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}