.card {
  display: block;
  background-color: #ffffff;
  box-shadow: 0 0px 12px rgb(156, 156, 156);
  border-radius: 8px;
  margin: 20px;

  width: 350px;
  transition: transform 0.3s;
  cursor: pointer;

  /* Change Card Height Here */
  overflow: hidden;
}

.card:hover {
  transform: scale(1.05);
}

/* Pad the image so the image doesn't reach the edge */
.card-imgcontainer {
  width: 100%;
  padding: 20px;
}

.card img {
  
  height: 150px;
  width: 100%;

  object-fit: contain;
  /* Add a subtle border between image and content */
  /* border-bottom: 1px solid #ddd; */
}


.card-content {
  padding: 20px;
  padding-top: 5px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;

  /* border: 1px solid red; */
  height: 23rem;  

}

.card-title-header {
  margin-bottom: 2px;
  /* border: 1px solid green; */
}

.clear-div {
  clear: both;
}

.card-title {
  padding-left: 1px;
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;

  float: left;
  /* border: 1px solid red; */
}

.card-title-small {
  padding-left: 1px;
  font-size: 1rem;
  
  font-weight: bold;
  color: #333;
  float: left;
  height: 2.6rem;
  align-items: center;
  /* border: 1px solid red; */
}

.card-links {
  font-size: 0.8rem;
  margin-top: 5px;

  float: right;
  /* border: 1px solid blue; */
}

.card-desc {
  font-size: 1rem;
  color: #111;
  margin-bottom: 10px;
  overflow: auto;
  height: 13.8rem;
  /* border: 1px solid green; */
}

.card-icon {
  font-size: 0.8rem;
  color: rgb(173, 173, 173);
  padding-left: 8px;
  transition: 0.3s;
}

.card-icon:hover {
  color: #333;
}

.card-float-bottom {
  /* border: 1px solid magenta; */
  margin-top: auto;
}

.card-location {
  font-size: 0.8rem;
  color: #666666;
}

/*  Card Roles Container */
.card-roles {
  padding-top: 5px;
  padding-bottom: 5px;

  /* Dynamic Columns to strech across card, always spaced good */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

/* Card Icon NOT AVAIL */
.card-roles .role-icon {
  color: grey;
  border: 1px solid grey;

  font-size: 0.8rem;
  border-radius: 20px;
  padding: 0px 8px;
}

.card-roles .role-icon-has {
  color: white;
  background-color: #007bff;
  /* border: 1px solid #007bff; */

  font-size: 0.8rem;
  border-radius: 20px;
  padding: 0px 8px;
}

/* CARD ICON AVAIL
.card-roles .role-icon-has {
  color: rgb(76, 180, 76);
} */