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

    lg:p-4
    lg:w-[306px];

  .subtitle {
    @apply
      font-mono;
  }
}

.popup {
  @apply
    bg-black
    opacity-0
    pointer-events-none
    invisible
    transition-all
    duration-200
    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
        lg:p-11
        p-6
        py-8
        lg:py-11
        flex-col
        w-[315px]
        min-h-[535px]
        justify-between

        lg:w-[unset]
        lg:min-h-[464px]
        lg:min-w-[780px];

      .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-[300px]
            h-full;
        }
      }

      .popup-closer {
        @apply
          absolute
          right-5
          cursor-pointer
          top-5
          z-[50];

        svg {
          @apply
            h-3
            w-auto

            lg:h-7;
        }
      }

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

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

          lg:text-[35px];

        * {
          @apply
            leading-tight;
        }
      }

      .description {
        @apply
          z-10
          text-[15px]

          lg:text-xl;

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