fe/styles/novel-info.module.scss

.novel-wrap {
  @apply bg-cover bg-center overflow-hidden relative;
  @apply before:absolute before:inset-0 before:bg-white before:bg-opacity-60 before:backdrop-blur;
}
.novel-container {
  @apply container relative;
}
.crumbs {
  @apply flex items-center my-4;
  svg {
    @apply w-5 h-5;
  }
  a,
  span {
    @apply mr-1;
  }
}
.novel-info {
  @apply flex pb-5;
  .novel-info-cover {
    @apply w-24 flex-shrink-0 mr-4 self-start md:w-32 lg:w-56 lg:mr-10;
  }
  .nove-info-body {
    @apply w-0 flex-1 flex flex-col justify-between;
    h1 {
      @apply w-full text-xl font-bold md:text-3xl lg:text-4xl;
      small {
        @apply text-xs inline-block align-middle px-2 py-0.5 bg-primary text-white rounded ml-2;
      }
    }
    h2 {
      @apply text-sm flex items-center whitespace-nowrap flex-wrap py-2 lg:text-xl;
      a,
      strong {
        @apply flex items-center mr-2 font-bold lg:mr-4;
      }
      svg {
        @apply w-4 h-4 mr-1 md:w-5 md:h-5 lg:w-8 lg:h-8;
      }
    }
    .btns {
      @apply flex;
    }
    .button {
      @apply block bg-primary text-white px-4 py-2 rounded-md uppercase lg:text-lg;
    }
  }
}