.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 {
  @apply homegrade-page-container;

  &__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;
    }
  }
  .component {
    @apply border-b border-neutral-300 py-16;
    > * {
      @apply !max-w-full w-full mx-auto;
    }
  }
  .component-explanation {
    @apply py-6 text-center pb-16;
    &__title {
      @apply text-3xl font-bold  pb-0 text-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;
      }
    }
    &__option {
      @apply py-4;
    }

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

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

#blocks-components {
  @apply pb-64;
  .block-content-page-header {
    @apply px-16 rounded-3xl;
    @apply shadowed bg-white;
  }
}