/* Application card hover copy only. */
.application-grid .application .application-description {
  display: block;
  max-width: 31ch;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  transition: max-height .4s ease, opacity .4s ease, transform .4s ease;
}

.application-grid .application:hover .application-description {
  max-height: 96px;
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .application-grid .application .application-description {
    max-height: 96px;
    opacity: 1;
    transform: none;
  }
}

/* On touch screens the general card-arrow rule uses nowrap. Exclude the
   explanatory copy so it can wrap naturally and remain fully visible. */
@media (max-width: 900px) {
  .application-grid .application > div > .application-description {
    display: block !important;
    max-width: none;
    white-space: normal !important;
  }
}