@import "import";

.mediaCard {
  opacity: 0.45;
  pointer-events: auto;
  transition: opacity 0.6s ease-out;

  .caption {
    color: color(text-faint-light);
    margin-top: spacer(3);
    white-space: normal;
    letter-spacing: var(--letter-spacing-base);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-out 0s;
  }

  &.active {
    opacity: 1;
    pointer-events: auto;

    .caption {
      opacity: 1;
      pointer-events: auto;
      transition: opacity 0.6s ease-out 0.5s;
    }
  }
}