/*
Used to control the styling of the cards or tiles used
under the Projects section.
*/

#container-middle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  /* justify-items: center; */
  /* justify-content: center;
  align-items: center;   */
  /* place-items: center; */
  max-width: 1200px;
  /* width: fit-content; */
  gap: 2em;
}

a .cell {
  text-decoration: none;
  color: #424242;
}

.cell {
  padding: 0;
  border-radius: 6px;
  box-shadow: 3px 3px 16px rgba(0,0,0,.16);
  overflow: hidden;
  transition: all .4s ease;
}

.post-title-box {
  height: 250px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  -webkit-flex-direction: column;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.post-summary-box {
  height: 250px;
  background-color: white;
}

.post-category {
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  color: silver;
  padding: .8rem .75rem;
  width: 100%;
  background: rgba(0, 0, 0, 0.5); /* black background with 50% opacity */
  display: none; /* hide for now */
}

.post-category p {
  margin: 0;
  color: whitesmoke;
}

.post-category a {
  text-decoration: none;
}

.post-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: .9em;
  text-transform: uppercase;
  /* text-overflow: ellipsis; */
  overflow: hidden;
  color: #fff;
  height: 70%;
  padding: .5rem 1rem;

  /* 
  This part is supposed to "clamp" the text to 4 lines
  but, I couldn't get it to work reliably. Will manually
  pay attention to number of lines entered in title.

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;  
  */
}

.post-summary {
  line-height: 1.25em;
  padding: 1.25rem 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-content-box {
  background-color: white;
}

.post-content {
  font-size: 1.15rem;
  line-height: 1.05em;
  padding: .8rem .75rem;
  text-overflow: ellipsis;
  overflow: hidden;
}

.office {
  background: url("/images/officesuite.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.unraid {
  background: url("/images/qnap1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.linux {
  background: url("/images/linuxmint3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.security {
  background: url("/images/security1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.technology {
  background: url("/images/technology1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.database {
  background: url("/images/cardcatalog.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}


/* Media Queries to change properties based on screen size. */
@media screen and (max-width: 600px){
  #container-middle {
    margin: .5rem 1rem;
  }
}

@media screen and (max-width: 800px){
  #container-middle {
    margin: 1rem 3rem;
  }
}

@media screen and (min-width: 800px){
  #container-middle {
    margin: 2rem 5rem;
  }
}