.card-thematique {
  @apply flex flex-col p-8 rounded-3xl relative bg-white;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);

  &__thumbnail {
    @apply w-full self-end;
    max-height: 250px;
    width: auto;
    margin-top: -110px;
    margin-right: 0px;
  }
  &__title {
    @apply text-lg font-bold pb-4;
  }
  &__descritpion {
  }

  &__cta {
    @apply after:absolute 
		after:inset-0
		font-bold
		hover:opacity-100
		pt-8
		flex
		items-center
		justify-between;
    transition: font-weight 0.3s ease-in-out;
    .cta_arrow_button {
      @apply block;
      width: 50px;
      height: 50px;
    }
  }

  &:hover {
    transform: scale(1.02) translateY(-10px);
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);

    .cta_arrow_button {
      opacity: 1;
    }
  }

  &.card-acoustique:hover,
  &.card-petites-coproprietes:hover {
    .cta_arrow_button {
      @apply filter-acoustique-coproprietes;
    }
  }
  &.card-au-quotidien:hover,
  &.card-isolation:hover {
    .cta_arrow_button {
      @apply filter-isolation-quotidien;
    }
  }
  &.card-energies:hover,
  &.card-urbanisme:hover {
    .cta_arrow_button {
      @apply filter-energies-urbanisme;
    }
  }
  &.card-location:hover {
    .cta_arrow_button {
      @apply filter-location;
    }
  }
  &.card-patrimoine:hover {
    .cta_arrow_button {
      @apply filter-patrimoine;
    }
  }
}