.popup-opener {
  @extend .has-xs-font-size;
  @apply
    fixed
    bottom-0
    cursor-pointer
    right-0
    w-[306px]
    flex
    justify-between
    items-center
    p-4
    z-10;

  .subtitle {
    @apply
      font-mono;
  }
}

.popup {
  @apply
    bg-black
    opacity-0
    pointer-events-none
    invisible
    transition-all
    bg-opacity-20
    fixed
    flex
    inset-0
    z-50;

  &.opened {
    @apply
      opacity-100
      pointer-events-auto
      visible;
  }

  .inner {
    @apply
      absolute
      inset-0
      flex
      mx-auto
      justify-center
      items-center
      max-w-3xl;

    .content {
      @apply
        flex
        relative
        min-w-[780px]
        min-h-[464px]
        p-11
        flex-col
        justify-between;

      .text {
        @apply
          z-10;
      }

      figure {
        @apply
          absolute
          top-0
          pointer-events-none
          flex
          p-11
          h-full
          items-center
          bottom-0
          right-0;

        img {
          @apply
            w-auto
            max-h-[400px]
            h-full;
        }
      }

      .popup-closer {
        @apply
          absolute
          right-5
          cursor-pointer
          top-5;
      }

      .subtitle {
        @apply
          text-xs
          font-mono
          mb-1;
      }

      .title {
        @apply
          mb-12
          text-[35px];

        * {
          @apply
            leading-tight;
        }
      }

      .description {
        @apply
          z-10
          text-xl;

        * {
          @apply
            leading-tight;
        }
      }
    }
  }
}
