.project-title {
    font-size: 1rem;
    margin-top: 0.5rem;
}

.project-box {
    display: block;
}

.project-box {
    /* border: 2px solid lightgray;  */
    height: 100%;
    box-sizing: border-box;
    /* margin-bottom: 1rem; */
    padding: 1rem;
    -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.05);
    box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.05);

    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;

    transition-property: box-shadow;
    transition-duration: 0.25s;
    
}

.project-box:hover {
    /* border: 2px solid lightgray;  */
    padding: 1rem;
    -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.025);
    -moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.025);
    box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.025);

    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    
}

.project-coverimg {
    width: 100%;
    max-height: none;
    aspect-ratio: 2/1;
    object-fit: cover;
    transition: 0.25s;
  }

.project-coverimg {
    width: 100%;
    max-height: none;
    aspect-ratio: 3/2;
    object-fit: contain;
    /* transition: 0.25s; */
}

.project-box .project-title {
    transition: 0.25s;
    word-wrap: break-word;
    white-space: normal
}

.project-box:hover .project-title {
    color: grey;
}
/* .project-box:hover .project-coverimg {
    filter: grayscale(50%);
} */

.project-box a  {
    display: block;
}

@media screen and (max-width: 55rem) {
    .project-coverimg {
      max-height: 10rem;
      object-fit: contain;
    }
  }