figure.pcss

.figure,
.content-block figure {
  @apply relative;

  img {
    @apply w-full;
  }

  figcaption {
  @apply absolute flex items-end z-10 bottom-0 left-0 w-full h-full px-4 py-4 text-white text-sm leading-tight;

    &:before {
      @apply absolute block top-0 left-0 bottom-0 right-0 pointer-events-none opacity-100 transition duration-200;

      content: "";
      z-index: -1;

      background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.8));

      @screen sm {
        background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.8));
      }
    }
  }

  &:hover,
  &:focus {
    figcaption:before {
      @apply opacity-0;
    }
  }
}