.video-program .category-title { width: 100%; } .video-program.card-group .card-body img { object-fit: cover; } .video-program.card-group .row { position: relative; display: flex; flex-wrap: wrap; width: 100%; } .video-program.card-group .card-back { transform: rotateY(180deg) translateX(-100%); position: absolute; backface-visibility: hidden; transition: transform 300ms; transition-timing-function: linear; display: block; width: 100%; height: 100%; top: 0; background: white; color: black; } .video-program.card-group .card.card-flip.h-100:nth-child(4n) { margin-right: 0em; } .video-program.card-group .card.card-flip.h-100 { position: relative; width: 25%; width: calc( 25% - 0.75em); background: white; margin-right: 1em; margin-bottom: 1em; } @media (max-width: 768px){ .video-program.card-group .card.card-flip.h-100 { width: 50%; width: calc( 50% - 0.5em); } .video-program.card-group .card.card-flip.h-100:nth-child(2n) { margin-right: 0em; } } @media (max-width: 575px){ .video-program.card-group .card.card-flip.h-100 { width: 100%; margin-right: 0em; } } .video-program.card-group h3.card-title { padding: 0.5em; margin: 0; font-size: 1.2em; } .video-program.card-group .card-front{ backface-visibility: hidden; width: 100%; height: 100%; } .video-program.card-group .card-front .card-footer { position: absolute; color: #fff; left: 0; bottom: 0; overflow: hidden; text-overflow: ellipsis; max-height: 60%; background: linear-gradient(transparent, rgba(0, 0, 0, .2) 20%, rgba(0, 0, 0, .8) 90%); } .video-program.card-group .card.card-flip.h-100:hover .card-back { transform: rotateY(0deg); } .video-program.card-group .card-button-group{ bottom: 0; right: 0; position: absolute; display: flex; vertical-align: middle; } .video-program.card-group .card-body{ width: 100%; position: inherit; display: flex; flex-direction: column; height: 100%; } .video-program.card-group .card-button-group a { color: #fff; display: block; background: #6c757d; padding: 0.5em; width: 2.3em; height: 2.3em; margin-right: 0.1em; border-radius: 0; } .video-program.card-group .card-button-group a:hover { color: #fff; background-color: #5a6268; border-color: #545b62; } .video-program.card-group .card-button-group a:focus { color: #fff; outline: 0.1em dotted !important; } .video-program.card-group .card-button-group span { line-height: 2; }