header.bg-image-full img {
  max-width: 46%;
}

.card {
  height: 256px;
  max-height: 256px!important;
  border-radius: 1rem;
  padding: 0!important;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box, padding-box;
  background-size: contain;
  background-origin: content-box;
}

.card .desc {
  width: 100%!important;
  height: 100%!important;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #ccc;
  border-radius: 1rem;
  display: none;
}

.card .desc-a {
  width: 100%!important;
  height: 100%!important;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #ccc;
  border-radius: 1rem;
  display: none;
}

.card:hover .desc, .card:hover .desc-a {
  display: block;
}

.card .desc .header, .card .desc-a .header {
  height: 25%!important;
}

.card .desc .header img, .card .desc-a .header img {
  height: 100%;
}

.card .desc .body {
  height: 55%!important;
  padding: 1rem;
}

.card .desc-a .body {
  height: 75%!important;
  padding: 1rem;
}

.card .desc .footer {
  height: 20%!important;
}

.card:hover .desc .footer {
  position:relative;animation:animatebottom 0.3s;
}

@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}

@media (max-width: 576px) {
  header.bg-image-full img {
    min-width: 80%;
    max-width: 90%;
  }
  .card .desc .body {
    overflow: scroll;
    overflow-x: auto;
  }
}

@media (max-width: 768px) {
  header.bg-image-full img {
    min-width: 80%;
    max-width: 90%;
  }
}