.homegrade-blocks-highlight {
  @apply p-6 py-8 md:p-12 rounding-radius my-8 max-w-screen-lg mx-auto;

  &__titling {
    @apply sm:flex items-center md:mb-8 gap-x-3;
    .icon {
      @apply mb-2 sm:mb-0 rounded-full p-3;
      &__image {
        /* @apply w-32 h-32 bg-green-400 object-contain; */
      }
    }
    h3 {
      @apply pb-4 !my-0;
    }
    &--has-no-icon {
      h3 {
        @apply !text-4xl;
      }
    }
  }

  p {
    /* @apply max-w-5xl; */
    @apply max-w-6xl;
    margin-bottom: 0px;
  }
  p + * {
    margin-top: 10px;
  }
  &__block-title {
    @apply !pb-0 !leading-tight pt-4 md:pt-0;
  }

  &__content {
    @apply !pt-3 xl:!pt-0 flex flex-col-reverse xl:flex-row items-start gap-x-8 gap-y-2;
    h2 {
      @apply !text-2xl;
    }
    .homegrade-blocks-highlight__content__innerblocks {
      @apply w-full;
      > *:first-child {
        @apply !mt-0;
      }
    }
  }

  &__logo {
    @apply p-4 bg-white h-auto flex justify-center items-center rounded-3xl;
    width: 150px;
    height: 150px;
    aspect-ratio: 1/1;
    margin-top: -10px;
    img {
      @apply max-h-full max-w-full block;
    }
  }

  .wp-block-buttons {
    @apply gap-x-4;
  }
  .wp-block-button {
    @apply mt-6 font-semibold;
  }
  .wp-block-button + * {
    @apply mt-6;
  }
  .wp-block-buttons {
    @apply gap-y-0;
    .wp-block-button {
      @apply mt-0;
    }
  }
  &--classic {
    @apply bg-primary text-white;
    .icon {
      @apply bg-secondary;
    }
    .homegrade-blocks-custom-heading.has-icon::before {
      @apply !bg-secondary;
    }
    .wp-block-button__link {
      @apply cta cta--secondary;
    }
    a {
      @apply !text-white;
    }
    a:not(.cta, .wp-block-button__link) {
      @apply px-0;
      &:hover {
        @apply !bg-transparent;
      }
      &:after {
        filter: brightness(0) invert(1) opacity(90%);
      }
    }
  }

  &--warning {
    @apply !bg-transparent !relative !text-secondary;

    .icon {
      @apply !bg-secondary;
    }
    .wp-block-button__link {
      @apply cta cta--secondary;
    }
    wp-block-button__link ul li:before {
      @apply bg-secondary;
    }
    .homegrade-blocks-custom-heading.has-icon::before {
      @apply !bg-secondary;
    }
    .homegrade-blocks-highlight__block-title,
    *::marker,
    h2,
    h3,
    h4,
    h5,
    h6 {
      @apply !text-secondary;
    }
    p > a {
      @apply !text-primary font-bold;
    }
    ul li {
      &:before {
        @apply !bg-secondary;
      }
    }
    &:after {
      @apply absolute 
      block 
      rounding-radius
      w-full 
      h-full
      !bg-secondary
      top-0
      left-0;
      opacity: 0.05;
      content: '';
      /* z-index: -1; */
      z-index: 0;
      pointer-events: none;
    }
  }
  &--gray {
    @apply bg-gray;
  }
}

.homegrade-blocks-highlight--has-illustration {
  @apply flex flex-col-reverse lg:flex-row lg:items-center justify-between;

  &__illustration {
    @apply mb-12 lg:mb-0 mt-0  lg:mx-0 w-48 h-48 xl:w-52 xl:h-52 object-contain object-center shrink-0;
    aspect-ratio: 1/1;
  }

  &__content {
    @apply max-w-3xl;
  }

  h3 {
    @apply text-2xl font-bold;
  }
}

.page {
  .homegrade-blocks-highlight--classic ul li:before {
    @apply bg-white;
  }
  .homegrade-blocks-highlight--classic ol li::marker {
    @apply !text-white;
  }
}
