.wp-block-dynamiques-blocks-nos-recommandations {
  @apply bg-carhop-purple-100 py-24 px-12 xl:px-24;
  .inner {
    @apply max-w-screen-2xl mx-auto;
  }

  .block-heading {
    @apply text-primary flex flex-wrap gap-x-8;

    &__title {
      @apply flex grow items-end justify-between gap-8 uppercase text-2xl md:text-4xl lg:text-5xl;
      span {
        @apply block shrink-0;
      }
      &:after {
        @apply w-full z-20 bg-primary block mb-2 shrink;
        height: 1px;
        content: ' ';
      }
    }

    &__subtitle {
      @apply text-lg  font-bold  uppercase nunito mb-6 w-full flex-wrap;
    }

    .header-link {
      @apply text-lg font-medium    nunito flex items-center gap-3;
      text-transform: none;
      span {
        @apply pt-1;
      }

      svg {
        @apply w-8 h-8;
        transition: transform 0.3s ease-in-out;
        path,
        circle {
          @apply stroke-primary stroke-2;
        }
      }
      &:hover {
        svg {
          @apply rotate-45 translate-x-2;
        }
      }
    }
  }

  .recommandations-grid {
    @apply grid lg:grid-cols-3 gap-16 pt-12;
  }

  .revue-recommandation-card {
    @apply flex flex-col gap-x-8 gap-y-2 bg-white p-8 border border-primary h-fit;
    .content-meta {
      @apply text-primary;
    }
    &__title {
      @apply text-2xl;
    }
    &__thumbnail {
      @apply p-4  border border-primary mt-8;
      transform: rotate(2deg);

      img {
        transition: filter 0.3s ease-out;
        filter: grayscale(100%);
        @apply w-full h-48 object-cover;
      }
      &:hover img {
        filter: grayscale(0%);
      }
    }
  }

  .revue-recommandation-card:nth-child(1) {
    @apply mt-auto;
  }
  .revue-recommandation-card:nth-child(2) {
    @apply my-auto;
  }
  .revue-recommandation-card:nth-child(3) {
    @apply mb-auto;
  }
}