carhop__carhop-theme__DEV/resources/css/blocks/chapter-section.css

.chapter-section {
  @apply relative flex items-center justify-between gap-8  2xl:gap-12 !my-0;
  @apply py-32 xl:py-32 2xl:py-48 px-32;

  @apply max-w-screen-2xl mx-auto;
  color: var(--content-box-text-color);

  &:first-child {
    @apply mt-0;
  }

  h2 {
    @apply title-small;
  }
  h3 {
    @apply subtitle-big;
  }
  &--right {
    @apply flex-row-reverse;
  }
  &--has-background {
    @apply relative py-12 xl:py-24 !mb-12;

    &:not(:first-child) {
      @apply mt-0;
    }

    &:first-child {
      margin-top: -32px !important;
    }
  }

  &__content {
    @apply max-w-3xl;
    p {
      @apply text-neutral-600 max-w-xl mb-2;
    }
  }
  &__content p,
  .carhop-heading p,
  h1.wp-block-heading,
  h2.wp-block-heading,
  h3.wp-block-heading,
  h4.wp-block-heading,
  h5.wp-block-heading,
  h6.wp-block-heading {
    color: var(--chapter-section-text-color);
  }

  &__innerblocks {
    /* @apply max-w-xl; */
    p {
    }
  }

  &__cover {
    @apply object-contain;
    min-width: 0;
    flex-shrink: 1;
    max-width: 100%; /* Empêche de dépasser son conteneur */
    display: block;

    &--large {
      @apply !h-96;
    }
    &--grande {
      @apply !h-80;
    }
    &--medium {
      @apply !h-64;
    }
    &--small {
      @apply !h-12;
    }
    &--classic {
      @apply !rounded-none;
    }
    &--photoframe {
      @apply object-cover;
      border: 20px solid white;
      box-sizing: content-box;
      filter: saturate(0);
      transition: all 0.3s ease;

      &:hover {
        filter: saturate(1);
        scale: 1.01;
      }
    }
  }

  &__background {
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-full;
    z-index: 1;
    width: calc(100% - 30px);

    &--right {
      transform: scaleX(-1);
    }
  }

  &--width-full {
    .chapter-section__background {
      @apply !w-screen !top-0 !left-0;
      transform: unset;
      margin: 0 calc(50% - 50vw) !important;
    }
  }

  > *:not(.chapter-section__background) {
    z-index: 2;
  }
}

.chapter-section:nth-child(even) {
  .chapter-section__cover--photoframe {
    @apply -rotate-1;
  }
}