.cards-section {
padding: 60px 0; background: $smoky-grey; .title { margin-top: 0; margin-bottom: 15px; font-size: 24px; font-weight: 600; } .intro { margin: 0 auto; max-width: 800px; margin-bottom: 60px; color: $text-color-secondary; } .cards-wrapper { max-width: 860px; margin-left: auto; margin-right: auto; } .item { margin-bottom: 30px; .icon-holder { margin-bottom: 15px; } .icon { font-size: 36px; } .title { font-size: 16px; font-weight: 600; } .intro { margin-bottom: 15px; } } .item-inner { padding: 45px 30px; background:#fff; position: relative; border: 1px solid $divider; @include border-radius(4px); .link { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1; } &:hover { background: $smoky-white; } } .item-primary { .item-inner { border-top: 3px solid $color-primary; &:hover { .title { color: darken($color-primary, 15%); } } } .icon { color: $color-primary; } } .item-green { .item-inner { border-top: 3px solid $color-green; &:hover { .title { color: darken($color-green, 15%); } } } .icon { color: $color-green; } } .item-blue { .item-inner { border-top: 3px solid $color-blue; &:hover { .title { color: darken($color-blue, 15%); } } } .icon { color: $color-blue; } } .item-orange { .item-inner { border-top: 3px solid $color-orange; &:hover { .title { color: darken($color-orange, 15%); } } } .icon { color: $color-orange; } } .item-red { .item-inner { border-top: 3px solid $color-red; &:hover { .title { color: darken($color-red, 15%); } } } .icon { color: $color-red; } } .item-pink { .item-inner { border-top: 3px solid $color-pink; &:hover { .title { color: darken($color-pink, 15%); } } } .icon { color: $color-pink; } } .item-purple { .item-inner { border-top: 3px solid $color-purple; &:hover { .title { color: darken($color-purple, 15%); } } } .icon { color: $color-purple; } }
}
/* Extra small devices (phones, less than 768px) */ @media (max-width: 767px) {
.cards-section .item-inner { padding: 30px 15px; }
}