.demo-components-home {
  @apply bg-secondary container px-8 mx-auto py-12 my-12 rounded-3xl;
  @apply text-white text-center;
  h1 {
    @apply text-base font-bold tracking-wider uppercase;
    letter-spacing: 0.15em;
  }
  h2 {
    @apply text-5xl font-bold tracking-wide max-w-3xl mx-auto py-8;
  }
  p {
    @apply text-lg font-medium tracking-wider;
  }
  .cta--white:hover {
    @apply bg-primary;
  }
  .buttons {
    @apply flex justify-center mx-auto mt-8 gap-4;
  }
}

.demo-components {
  mark {
    @apply text-secondary underline underline-offset-4  bg-white;
  }
  @apply homegrade-page-container;
  &__chapter_list {
    @apply w-fit
    text-secondary 
    font-semibold
    opacity-90
    mx-auto;

    @media screen and (min-width: 1800px) {
      @apply sticky
      mx-0 
      top-16
      left-0
      z-10;
      transform: translateX(calc(-100% - 50px));
    }
    li a {
      @apply !text-secondary;
    }
  }

  &__demo-component__explanatory-title {
    @apply text-base font-semibold text-secondary;
  }

  &__section-title {
    @apply text-white
     text-6xl
    text-center 
    bg-secondary
    flex
    flex-col 
    justify-center
    items-center py-8;
    height: 100vh;
    max-width: 100vw;
    margin: 2rem calc(50% - 50vw);

    h2 {
      @apply text-lg uppercase font-bold tracking-wide my-0;
    }
    h3 {
      @apply text-6xl font-bold tracking-wide my-0 mt-4;
    }
    p {
      @apply text-xl max-w-2xl mt-6 tracking-wide font-medium;
      line-height: 1.4;
    }
  }
  &__demo-component {
    @apply p-16 rounded-2xl mb-8;
    border: 2px dotted rgba(223, 30, 30, 0.2);
  }
  .demo-component {
    @apply py-16;
    > * {
      @apply !max-w-full w-full mx-auto;
    }
  }
  .component-explanation {
    @apply py-6 text-center pb-8;

    &__title {
      @apply text-3xl font-bold mt-0 mb-2  !py-0 text-secondary;
    }
    &__component-icon {
      @apply w-10 mx-auto mb-4;
      svg {
        @apply fill-secondary;
      }
    }
    &__technical-title {
      @apply font-semibold text-lg text-neutral-500 my-0 mb-2;
    }
    &__description {
      @apply text-neutral-500 text-base font-medium pt-0 max-w-lg mx-auto;
    }
    &__options {
      @apply mt-4 font-bold;
      h3 {
        @apply m-0 uppercase text-sm pt-4 text-secondary  tracking-wide;
      }
      ul {
        @apply my-0;
      }
    }
    &__option {
      @apply pt-4 pb-0;
      &:before {
        @apply content-none;
      }
    }

    &__option-title {
      @apply text-neutral-900 text-base !font-bold;
    }

    &__option-description {
      @apply text-neutral-500 text-base font-medium pt-0 mb-0 max-w-sm mx-auto;
    }
  }
  .buttons {
    @apply py-32;
    .buttons-example {
      @apply flex justify-center gap-8;
    }
  }
}

#blocks-components {
  @apply pb-64;
}