@import "suitcss-utils-display"; .Card { align-items: center; display: flex; flex: 1 1 0%; flex-direction: column; justify-content: center; overflow: visible; position: relative; transition: all 200ms ease-out; .Card-header { align-self: flex-start; display: flex; } .Card-content { align-items: center; display: flex; min-height: 15rem; @media (--lg-viewport) { flex: 2 1 0%; } } .Card-footer { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; width: 100%; @media (--lg-viewport) { justify-content: space-between; } } } .js-isHoverable .Card:hover { .Card-colors { box-shadow: 0 14px 17px -9px grey; opacity: 1; transform: translateY(100%); transition-delay: 0s, 0s, 0s; visibility: visible; z-index: 10; } } .Card-colors { bottom: 24px; left: 0; opacity: 0; position: absolute; transform: translateY(97%); transition: all 0.3s ease-in-out 0s, transform 0.3s ease-in-out 0s, opacity 0.2s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0.3s linear 0.3s; visibility: hidden; width: 100%; z-index: 0; } /* * Modifiers * */ .Card--big { padding-bottom: 40px; padding-left: 60px; padding-right: 25px; @media (--sm-viewport) { padding-bottom: 40px; padding-left: 20px; padding-right: 20px; text-align: center; } } .Card--small { background-color: transparent !important; padding: 0 60px 0 0; width: 300px; } @media (--sm-viewport) { .u-sm-hidden { display: none !important; } }