.hero-section,
.learn-section {
  @apply container sm:pt-12 lg:pt-24;
}

.hero-section {
  @apply flex flex-col justify-center lg:flex-row lg:justify-between;

  .left-side {
    @apply flex flex-col justify-center text-center rounded-sm lg:max-w-md xl:max-w-lg lg:text-left mb-12;

    p {
      @apply mb-8 text-lg sm:mb-12 leading-relaxed text-justify;
    }
  }

  .right-side {
    @apply hidden lg:block;

    img {
      @apply object-contain w-auto h-auto;
    }
  }
}

.learn-section {
  p {
    @apply italic text-slate-400;
  }

  div.topics {
    ul {
      @apply grid grid-cols-1 md:grid-cols-2 gap-4 mb-12;

      li {
        @apply rounded-md border border-slate-200 shadow shadow-slate-400 focus:outline-none;

        /* unfortunately tailwind doesn't support dark:border-slate-700 and dark:shadow-slate-900 in nested css */
        :global(.dark) & {
          @apply border-slate-700 shadow-slate-900;
        }

        &.draft a {
          @apply cursor-not-allowed;
        }

        a {
          @apply flex flex-row w-full block px-2 py-3 no-underline;

          div.topic-content-left {
            @apply px-2 py-1 min-w-fit text-slate-900;

            /* unfortunately tailwind doesn't support dark:text-slate-300 in nested css */
            :global(.dark) & {
              @apply text-slate-300;
            }
          }

          div.topic-content-right {
            h3 {
              @apply text-inherit hover:underline;
            }

            div {
              @apply text-slate-800;

              /* unfortunately tailwind doesn't support dark:text-slate-200 in nested css */
              :global(.dark) & {
                @apply text-slate-200;
              }
            }
          }
        }
      }
    }
  }
}
