@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600); @import url(https://fonts.googleapis.com/css?family=Martel:400,200,700,600,300); .card{ float: left; overflow: hidden; width: 270px; min-height: 200px; margin: 20px; background-color: white; box-shadow: 0 10px 10px -8px rgba(black, 0.075), 0 12px 20px -8px rgba(black, 0.075), 0 15px 20px -8px rgba(black, 0.05), 0 0 10px 2px rgba(black, 0.025); header{ position: relative; overflow: hidden; height: 200px; -webkit-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; img{ display: block; position: absolute; bottom: 0; width: 100%; } } article{ padding: 30px; h2{ margin: 0 0 12px 0; font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 700; font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(black, 0.3); } h1{ margin: 0; font-family: 'Martel', serif; font-weight: 400; font-size: 30px; line-height: 36px; text-align: center; } hr{ width: 24px; margin: 12px auto; border: none; border-bottom: 2px solid rgba(black, 0.1); } p{ margin: 15px auto 0 auto; font-family: 'Noto Serif',"Book Antiqua",Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif; font-size: 15px; line-height: 21px; color: rgba(black, 0.5); text-align: center; } } } section:hover .blue{ color: #0071bc; } section:hover .red{ color: #e31c3d; } section:hover .green{ color: #2e8540; } .blue-border{ border-color: #046b99 !important; } .red-border{ border-color: #981b1e !important; }