style.css

body {
         /* Created with https://www.css-gradient.com */
         background: #23EC55;
         background: -webkit-radial-gradient(top right, #23EC55, #2D51C1);
         background: -moz-radial-gradient(top right, #23EC55, #2D51C1);
         background: radial-gradient(to bottom left, #23EC55, #2D51C1);
         }
         .wrapper {
         margin: 10vh;
         }
         .card {
         border: none;
         transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
         overflow: hidden;
         border-radius: 20px;
         min-height: 196px;
         box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
         }
         @media (max-width: 768px) {
         .card {
         min-height: 350px;
         }
         }
         @media (max-width: 420px) {
         .card {
         min-height: 300px;
         }
         }
         .card.card-has-bg {
         transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
         background-size: 120%;
         background-repeat: no-repeat;
         background-position: center center;
         }
         .card.card-has-bg:before {
         content: "";
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         background: inherit;
         -webkit-filter: grayscale(1);
         -moz-filter: grayscale(100%);
         -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
         filter: grayscale(100%);
         }
         .card.card-has-bg:hover {
         transform: scale(0.98);
         box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
         background-size: 130%;
         transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
         }
         .card.card-has-bg:hover .card-img-overlay {
         transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
         background: #234f6d;
         background: linear-gradient(0deg, rgba(4, 69, 114, 0.5) 0%, #044572 100%);
         }
         .card .card-footer {
         background: none;
         border-top: none;
         }
         .card .card-footer .media img {
         border: solid 3px rgba(255, 255, 255, 0.3);
         }
         .card .card-meta {
         color: #26BD75;
         }
         .card .card-body {
         transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
         }
         .card:hover {
         cursor: pointer;
         transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
         }
         .card:hover .card-body {
         margin-top: 30px;
         transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
         }
         .card .card-img-overlay {
         transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
         background: #234f6d;
         background: linear-gradient(0deg, rgba(35, 79, 109, 0.3785889356) 0%, #455f71 100%);
         }