.pair {
  display: flex;
  align-items: flex-start;

  .key {
    font-weight: bold;
    flex-shrink: 0;
  }

  .value {
    text-align: right;
    flex-grow: 1;
  }
}

.project-carousel {
  .carousel-item {
    position: absolute;
    top: 0;
    left: 0;

    br {
      line-height: 0.6em;
    }
  }

  .carousel-item-small {
    position: absolute;
    top: 0;
    left: 0;

    &:not(.active) {
      display: none;
    }
  }

  .carousel-description {
    max-height: 14rem;
    overflow: hidden;
  }

  .carousel-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;

    background: linear-gradient(var(--dim-background-transparent), var(--dim-background));
  }
}

.project-card {
  background-color: var(--c3);
  color: var(--color);

  /* TODO(redesign): Audit use of badges. */
  .badges:empty {
    display: none;
  }

  .badge {
    color: white;
    border-radius: 5px;
  }
}

.project-card-logo {
  --image-size: 5rem;

  width: var(--image-size);
  height: var(--image-size);
  object-fit: cover;

  @media screen and (min-width: 35em) {
    --image-size: 8rem;
  }
}

.project-header-img {
  /* w-100 h5 bg-white-50 bg-center cover */
  width: 100%;
  height: var(--height-5);
  /* TODO(redesign): Better placeholder */
  background-color: rgba(255, 255, 255, 0.5);
  background-size: cover;
}

.project-links {
  background-color: var(--c-transparent-background);
  display: flex;
  align-items: center;
  --link-color: var(--color);
  font-weight: bold;

  /* make sure secondary links render at the right height despite SVG size */
  &::after {
    content: '\200b';
    padding: var(--spacing-2) 0;
  }
}

.project-homepage-card {
  width: 100%;
  max-width: var(--site-width-narrow);
  padding: var(--spacing-3);
  background-color: var(--c-transparent-background);
  --link-color: var(--color);
  display: flex;
  gap: var(--spacing-3);
  overflow: hidden;

  margin-top: -4rem;
}