.post-header {
  @apply bg-primary text-white py-32;

  h1.post-header__title,
  h2.post-header__title {
    @apply uppercase font-medium text-4xl md:text-5xl lg:text-7xl text-white;
    line-height: 1.2;
  }
  &__inner {
    @apply container mx-auto  grid  gap-24;
    &--has-thumbnail {
      grid-template-columns: 1fr 4fr;
    }
    &--no-thumbnail {
      grid-template-columns: 1fr;
    }
  }
  .content-meta__revue-issue {
    @apply bg-white text-primary;
  }
  .thumbnail-wrapper {
    @apply relative z-20;
    aspect-ratio: 4/5;
    padding: 1.2rem;

    &:before {
      content: '';
      @apply bg-white block absolute top-0 left-0 border border-carhop-green-700 w-full h-full  z-10;
    }

    img {
      /* max-height: 200px; */
      @apply w-full h-full relative z-10;
      @apply object-cover;
      /* width: calc(100% - 2rem);
      height: calc(100% - 2rem);
      margin: 0 auto; */
    }
    .thumbnail-overlay {
      @apply absolute z-0 rotate-3 top-6 left-6 w-full h-full border border-primary bg-white flex items-center justify-center;
      transform: translate(12px, 12px) rotate(3deg);
      background-image: linear-gradient(#efe8ff, #efe8ff);
      background-size: calc(100% - 12px) calc(100% - 12px);
      background-repeat: no-repeat;
      background-position: center;
      background-blend-mode: color-burn;
      &:after {
        content: '';
        @apply bg-carhop-purple-200;
        width: calc(100% - 2rem);
        height: calc(100% - 2rem);
      }
    }
  }

  .post-details {
    @apply flex flex-wrap justify-between gap-28 mt-12;
    grid-template-columns: 1fr 1fr;

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

  .socials-buttons {
    @apply flex flex-wrap gap-4 h-fit;

    &__button {
      @apply bg-white text-carhop-green-700 px-4 lg:px-6 md:px-8 !py-3 lg:!py-4 font-normal rounded-full w-max flex items-center gap-2;
      transition: transform 0.3s ease-in-out;
      &:hover {
        transform: scale(1.05);
      }

      &[disabled] {
        @apply opacity-50 cursor-not-allowed;
      }
      img {
        @apply w-7 h-7 filter-primary;
      }
    }
  }
}

.article-meta__related-revue a {
  @apply hover:underline underline-offset-8 text-white;
  text-decoration-color: #fff;
  text-decoration-thickness: 1px;
}

.article-meta__value {
  @apply text-white font-light tracking-wide;
  letter-spacing: 0.0015em;
}