.image-grid {
  width: 70vw;
  .image-thumb-container {
    margin: 1em;
    .image-thumb {
      max-height: 100%;
      max-width: 100%;
      border-radius: 4px;
      overflow: hidden;
      box-sizing: border-box;

      &:hover {
        border: 3px solid var(--background-primary);
        cursor: pointer;
      }
    }
  }
}

.title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: initial;
}
.icon {
  width: 60px;
  height: 60px;
  overflow: hidden;

  div {
    font-size: 2em;
    font-weight: 400;
    text-align: center;
    line-height: 60px;
  }
  img {
    height: 100%;
  }
}
.image-row {
  margin-bottom: 16px;
  border-radius: 4px;
  overflow: hidden;

  .image {
    max-width: 100%;
    max-height: 250px;
  }
}
.addon-detail-view {
  min-width: 600px;

  .icon-link {
    width: 24px;
    height: 24px;
  }

  .addon-dependencies {
    padding: 0.5em;
    margin-bottom: 0.5em;
  }
}

.id-link {
  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}

.funding-link-container {
  .addon-funding {
    background-color: var(--background-secondary-4);
    border-radius: 4px;
    padding: 0.5em;
    a {
      margin-right: 1em;
    }
    .funding-icon {
      width: 28px;
      height: 28px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
