.caption {
   display: block;
   position: relative;
   bottom: 0;
   left: 0;
   z-index: 3;
   cursor: default;
   margin-bottom: var(--space-sm);
   padding: var(--space-sm) var(--space-md);
   color: rgba(19, 19, 19, 0.5);
}

.caption > .description {
   color: rgba(19, 19, 19, 1);
}

.caption a {
   color: inherit;
}

.caption a::after {
   display: inline-block;
   margin-left: 0.125em;
   content: '↗';
}

@media (hover: hover) {
   .caption a {
      transition: color 150ms ease-in-out;
   }

   .caption a:hover {
      color: rgba(19, 19, 19, 1);
   }
}

@media (min-width: 640px) {
   .caption {
      margin-bottom: var(--space-md);
      padding: var(--space-sm);
   }
}