.content-block .pre-content .info {
  @apply w-1/3 flex justify-between;
}

.card.custom-zha .content-block {
  @apply p-5 !text-white;
}

.card.custom-zha .content-block .primary-cta {
  @apply mt-auto self-end rounded-[0.3rem] px-5 font-sans font-light absolute bottom-5 hover:rounded-[0.3rem] hover:text-white transition-[background-position] duration-500 ease-out;
  background: linear-gradient(
    to bottom,
    #000000 25%,
    #4eb872,
    #5fb7d3,
    #d35683
  );
  background-size: 100% 500%;
}

.card.custom-zha .content-block .primary-cta:hover {
  background-position-y: 100%;
}

.card.custom-zha .pre-content {
  @apply border-t-[1px] border-[rgba(255,255,255,0.3)] pt-5;
}

.card.custom-zha .info span,
.card.custom-zha .heading-title,
.card.custom-zha .sub-heading,
.card.custom-zha .description {
  @apply text-white font-thin transition-colors duration-200 ease-in-out;
}

.card.custom-zha:hover .info span,
.card.custom-zha:hover .heading-title,
.card.custom-zha:hover .sub-heading,
.card.custom-zha:hover .description {
  @apply text-black;
}

.card.overlay.custom-zha .pre-heading {
  @apply bg-white rounded-full !text-black p-1 px-3 !text-xs transition-colors duration-200;
}

.card.custom-zha:hover .pre-heading {
  @apply !text-white bg-black;
}

.card.custom-zha .heading-title {
  @apply text-4xl font-sans font-light;
}

.card.overlay.custom-zha .description {
  @apply w-1/2 !text-copy;
}