.baseLayout {
  @apply grid
    size-full
    grid-cols-[1fr]
    grid-rows-[auto_1fr_auto];
}

.articleLayout {
  @apply mx-auto
    grid
    w-full
    max-w-8xl
    grid-rows-[1fr]
    overflow-hidden
    grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
    sm:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)]
    xs:m-0
    xs:block
    xs:overflow-auto;

  > *:nth-child(1) {
    @apply grid-in-[sidebar];
  }

  > *:nth-child(2) {
    @apply overflow-y-auto
      overflow-x-hidden
      bg-gradient-subtle
      p-12
      grid-in-[main]
      dark:bg-gradient-subtle-dark
      xl:px-18
      xs:bg-none
      xs:p-4
      xs:dark:bg-none;
  }

  > *:nth-child(3) {
    @apply grid-in-[metabar];
  }

  > *:nth-child(4) {
    @apply sticky
      bottom-0
      flex
      w-full
      flex-col
      items-center
      self-stretch
      border-t
      border-t-neutral-200
      bg-white
      py-4
      grid-in-[footer]
      dark:border-t-neutral-900
      dark:bg-neutral-950;
  }
}

.centeredLayout {
  @apply flex
    w-full
    min-w-0
    items-center
    justify-center
    px-4
    py-14
    md:px-14
    lg:px-28;

  main {
    @apply items-center
      justify-center;
  }
}

.homeLayout {
  @apply gap-8
    md:flex-row
    md:gap-14
    xl:gap-28
    2xl:gap-32;

  section {
    &:nth-of-type(1) {
      @apply flex
        max-w-[500px]
        flex-[1_0]
        flex-col
        gap-8;

      > div {
        @apply flex
          max-w-[400px]
          flex-col
          gap-4;

        p {
          @apply text-base
            md:text-lg;
        }

        small {
          @apply text-center
            text-sm
            text-neutral-800
            dark:text-neutral-400
            xs:text-xs;

          sup {
            @apply cursor-help;
          }
        }
      }
    }

    &:nth-of-type(2) {
      @apply flex
          min-w-0
          max-w-full
          flex-[1_1]
          flex-col
          items-center
          gap-4
          md:max-w-2xl
          lg:max-w-3xl;

      > div {
        @apply w-full
          max-w-md
          md:max-w-full;
      }

      > p {
        @apply text-center
            text-sm
            text-neutral-800
            dark:text-neutral-200;
      }
    }
  }
}

.blogLayout,
.downloadLayout {
  @apply flex
    w-full
    justify-center
    bg-gradient-subtle
    dark:bg-gradient-subtle-dark
    xs:bg-none
    xs:dark:bg-none;

  main {
    @apply max-w-5xl
      gap-4
      px-4
      py-12
      md:px-14
      lg:px-28;
  }
}

.downloadLayout {
  section:nth-last-child(1) {
    @apply flex
      flex-col
      gap-2;

    p {
      @apply text-sm;
    }
  }

  section:nth-last-child(2) p {
    @apply flex
      flex-row
      flex-wrap
      items-center
      gap-2
      text-base;
  }
}

.contentLayout {
  @apply mx-auto
    grid
    w-full
    max-w-8xl
    grid-rows-[1fr]
    sm:grid-cols-[1fr_theme(spacing.52)]
    xl:grid-cols-[1fr_theme(spacing.80)]
    xs:m-0
    xs:block;

  > *:nth-child(1) {
    @apply flex
      w-full
      justify-center
      border-l
      border-l-neutral-200
      bg-gradient-subtle
      px-4
      py-14
      dark:border-l-neutral-900
      dark:bg-gradient-subtle-dark
      md:px-14
      lg:px-28
      xs:border-l-0
      xs:bg-none
      xs:pb-4
      xs:dark:bg-none;

    main {
      @apply max-w-[660px]
        gap-4;
    }
  }
}

.postLayout {
  main {
    > section {
      @apply flex
        flex-row
        items-center
        gap-4;
    }

    > div:nth-of-type(1) {
      @apply mb-4
        mt-2;
    }
  }
}