.Card {
  background: var(--color-white);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  &:hover {
    box-shadow: var(--shadow-2);
  }
}

.Card-media {
  align-items: center;
  display: flex;
  justify-content: center;

  img {
    display: block;
    height: auto;
    width: 100%;
  }

  // Supply a max size because in some instances the image is not constrained by a wrapping element.
  > img {
    max-width: 120px;
  }
}

.Card-media.is-missing {
  margin: auto;
  min-height: 75px;

  &::before {
    .Icon;

    color: var(--color-gray3);
    content: 'widgets';
    display: flex;
    font-size: var(--fontSize-xxl);
    text-decoration: none;
  }

  &:hover {
    text-decoration: none;
  }
}

.Card-title {
  background: var(--color-gray2);
  padding: var(--gap-m) var(--gap-l);
}
