.person {
  * {
    @apply
      transition-all;
  }

  .has-modal {
    @apply
      cursor-pointer;
  }

  &:hover {
    .has-modal {
      > .title {
        h3 {
          @apply
            text-primary-250;
        }

        svg {
          @apply
            left-1;

          path {
            @apply
              stroke-primary-250;
          }
        }
      }

      .subtitle {
        @apply
          text-primary-250;
      }
    }
  }

  .title,
  .subtitle {
    @apply
      transition-all;
  }

  .title {
    @apply
      flex
      items-center;

    h3 {
      @extend .has-base-font-size;
      @apply
        uppercase
        mr-5;
    }

    svg {
      @apply
        h-[13px]
        left-0
        relative
        transition-all
        w-auto;
    }
  }

  .subtitle {
    @apply
      text-xs
      mt-1.5
      font-mono;
  }

  .person_modal {
    @apply
      fixed
      cursor-auto
      inset-0
      z-[9999]
      bg-black
      bg-opacity-50
      flex
      p-12
      opacity-0
      flex-col
      transition-all
      duration-300
      text-white
      justify-center;

    &.active {
      @apply
        opacity-100;
    }

    .inner {
      @apply
        w-full
        h-full
        relative
        flex
        flex-col
        justify-center
        bg-primary-500
        px-12;

      .close {
        @apply
          absolute
          top-8
          inline-block
          h-5
          cursor-pointer
          w-5
          invert
          bg-no-repeat
          bg-cover
          right-8;

        background-image: url("../images/close.svg");
      }

      .description {
        @apply
          text-base
          max-w-4xl
          mt-12;
      }

      .title {
        @apply
          text-base;
      }

      .links {
        @apply
          text-[13px]
          uppercase
          mt-3
          flex
          font-light;

        a {
          @apply
            mr-5
            flex
            items-center
            justify-start
            after:h-3
            after:relative
            after:top-px
            after:ml-3
            after:w-3
            after:bg-contain
            after:inline-block
            after:bg-no-repeat;

          &::after {
            background-image: url("../images/arrow-right-white.svg");
          }
        }
      }
    }
  }
}
