.card-frequent-question {
  @apply shadowed p-8 rounded-3xl relative;
  transition: all 0.3s ease-in-out;

  &__icon {
    max-width: 80px;
  }
  &__title {
    @apply mt-4;
    @apply text-xl pb-4 font-bold;
  }
  &__details-container {
    @apply mt-4 flex justify-between items-center;
  }
  &__tags_container {
    @apply flex flex-wrap  gap-x-3;

    .tag {
      @apply py-1 px-4 rounded-lg;
    }
  }
  &:hover {
    transform: scale(1.015) translateY(-8px);
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
  }

  &.card-acoustique:hover,
  &.card-petites-coproprietes:hover,
  &.card-acoustique .cta--with-arrow-button:focus-visible,
  &.card-petites-coproprietes .cta--with-arrow-button:focus-visible {
    @apply !outline-acoustique-coproprietes;
    .cta_arrow_button {
      @apply filter-acoustique-coproprietes;
    }
  }

  &.card-au-quotidien:hover,
  &.card-isolation:hover,
  &.card-au-quotidien .cta--with-arrow-button:focus-visible,
  &.card-isolation .cta--with-arrow-button:focus-visible {
    @apply !outline-isolation-quotidien;
    .cta_arrow_button {
      @apply filter-isolation-quotidien;
    }
  }

  &.card-energies:hover,
  &.card-urbanisme:hover,
  &.card-energies .cta--with-arrow-button:focus-visible,
  &.card-urbanisme .cta--with-arrow-button:focus-visible {
    @apply !outline-energies-urbanisme;
    .cta_arrow_button {
      @apply filter-energies-urbanisme;
    }
  }

  &.card-location:hover,
  &.card-location .cta--with-arrow-button:focus-visible {
    @apply !outline-location-durabilite;

    .cta_arrow_button {
      @apply filter-location-durabilite;
    }
  }
  &.card-patrimoine .cta--with-arrow-button:focus-visible,
  &.card-patrimoine:hover {
    @apply !outline-patrimoine-sante-securite;

    .cta_arrow_button {
      @apply filter-patrimoine-sante-securite;
    }
  }
  .cta--with-arrow-button:focus-visible {
    @apply rounded-full;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: 6px;
  }
}