.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.card {
  padding: 30px;
  cursor: pointer;
  transition: transform 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 25px 0px 25px 0px;
}

.card a {
  color: var(--color1);
}

.card p {
  /* font-size: 12px; */
  margin-bottom: 20px;
}

.card:hover {
  transform: scale(1.03);
}

.card.expanded .content {
  max-height: 50vh;
}

.card.expanded h5 {
  color: var(--color8);
}

@media screen and (max-width: 1024px) {
  .card {
    padding: 25px;
  }
}