.page--single-revue,
.page--single-articles {
  .revue-header {
    @apply bg-purple-50 text-primary py-32;

    h1 {
      @apply uppercase font-medium text-7xl;
      line-height: 1.2;
    }
    &__inner {
      @apply container mx-auto  grid  gap-24;
      grid-template-columns: 1fr 4fr;
    }

    .thumbnail-wrapper {
      @apply bg-red-200;
      img {
        /* max-height: 200px; */
        @apply object-contain;
      }
    }

    .revue-meta {
      @apply flex gap-28 mt-12;

      &__label {
        @apply uppercase font-bold text-lg;
        letter-spacing: 0.2em;
      }
    }

    .revue-issue {
      @apply flex items-center gap-2;
      .revue-issue-number {
        @apply bg-white text-carhop-green-700 px-4 py-2 font-normal h-fit;
      }
    }

    .socials-buttons {
      @apply flex gap-4;
      &__button {
        @apply bg-white text-carhop-green-700 px-4 py-2 font-normal w-32 rounded-full border-primary w-fit border-2 flex items-center gap-2;
        img {
          @apply w-8 h-8 filter-primary;
        }
      }
    }
  }

  .content-wrapper {
    @apply container mx-auto grid grid-cols-12 gap-12 py-12;
    grid-template-columns: 1fr 4fr;
  }

  .sidebar {
    .search-field {
      input {
        @apply border border-primary w-full;
        @apply w-full p-4;
      }
    }
    .tags__title {
      @apply text-xl uppercase font-semibold mt-8 my-4 nunito;
    }
    .tags-list {
      @apply flex flex-wrap gap-4;
    }
    .article-tag {
      @apply block;
    }
  }

  .content-area {
    @apply max-w-screen-2xl mx-auto w-full;
    .edito {
      @apply border border-primary p-6 mb-12;

      summary:marker {
        @apply !hidden !bg-red-400;
      }
      &__title {
        @apply text-4xl font-bold mb-4;
      }
      &__content {
        @apply text-lg;
      }
      &__cta {
        @apply my-4;
      }
    }
    .table-matieres {
      &__title {
        @apply text-4xl font-bold mb-12;
      }
      .article-grid__list {
        @apply grid grid-cols-1 gap-4;
      }
    }
  }
  article {
    @apply py-12 my-12;
    .article-title {
      @apply mb-8;
    }
    .article-tags {
      @apply mb-12;
    }
  }
}