.root {
  @apply relative
    flex
    aspect-[1.90/1]
    items-center
    rounded
    border
    border-neutral-900
    bg-neutral-950
    bg-[url('/static/images/patterns/hexagon-grid.svg')]
    bg-contain
    bg-center
    @container/preview;

  &::after {
    @apply absolute
      inset-0
      m-auto
      aspect-square
      w-1/3
      rounded-full
      bg-gradient-radial
      blur-2xl
      content-['']
      @md/preview:blur-3xl;

    &.announcements {
      @apply from-green-700/90;
    }

    &.release {
      @apply from-info-600/90;
    }

    &.vulnerability {
      @apply from-warning-600/90;
    }
  }

  .container {
    @apply z-10
      mx-auto
      flex
      w-2/3
      max-w-xl
      flex-col
      gap-4
      text-center
      text-xs
      font-semibold
      text-white
      @sm/preview:text-base
      @md/preview:gap-6
      @md/preview:text-lg
      @lg/preview:gap-8
      @lg/preview:text-xl
      @xl/preview:gap-12
      @xl/preview:text-2xl
      @2xl/preview:text-3xl;

    .logo {
      @apply mx-auto
        size-6
        @md/preview:size-14
        @lg/preview:size-16
        @xl/preview:size-20;
    }
  }
}