$exhibit-card-overlay-padding: $card-img-overlay-padding / 2 !default;
$exhibit-card-overlay-opacity: 0.85 !default;
$exhibit-card-bg: $card-bg !default;
$exhibit-card-max-height: 255px !default;

.exhibit-card {
  background: $exhibit-card-bg;
  padding-bottom: 3rem;

  .unpublished {
    @extend .mx-auto;
    display: block;
    font-size: $font-size-sm;
    margin-top: -1.5rem;
    position: absolute;
    left: 0;
    right: 0;
    width: 15ch;
  }

  .card-title .stretched-link {
    outline: none;
  }

  .card-img {
    margin-top: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-img-overlay {
    background: rgba($exhibit-card-bg, $exhibit-card-overlay-opacity);
    border-bottom-left-radius: calc(0.25rem - 1px);
    border-bottom-right-radius: calc(0.25rem - 1px);
    padding: $exhibit-card-overlay-padding;
    top: inherit;
  }

  .exhibit-description {
    max-height: 0;
    outline: none;
    overflow-y: hidden;
    transition: $transition-base;
  }

  .subtitle {
    text-align: center;
  }

  .description {
    font-size: $font-size-sm;
  }

  &:hover {
    .exhibit-description {
      max-height: $exhibit-card-max-height;
    }
  }

  &:focus-within {
    outline: auto;

    .exhibit-description {
      max-height: $exhibit-card-max-height;
    }
  }
}