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

  &__titling {
    @apply sm:flex items-center;
    /* display: flex;
    align-items: center; */
    margin-bottom: 20px;
    .icon {
      @apply mb-2 sm:mb-0;
    }
    h3 {
      @apply pb-4;
    }
    &--has-no-icon {
      h3 {
        @apply !text-4xl;
      }
    }
  }
  p {
    /* @apply max-w-5xl; */
    @apply max-w-6xl;
    margin-bottom: 10px;
  }
  &__block-title {
    @apply !pb-0 !leading-none;
  }
  &__content {
    @apply !pt-3 xl:!pt-0 flex flex-col-reverse xl:flex-row items-start gap-x-8 gap-y-2;
    .homegrade-blocks-highlight__content__innerblocks {
      @apply w-full;
    }
  }
  &__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;
  }
  &--classic {
    @apply bg-primary text-white;
    .icon {
      @apply bg-secondary;
    }
    .wp-block-button__link {
      @apply cta cta--secondary;
    }
    a {
      @apply !text-white;
    }
    ol li::marker {
      @apply !text-white;
    }
    ul li:before {
      @apply bg-white;
    }
  }
  &--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-highlight__block-title,
    *::marker {
      @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;
  }
}