.c-image-container{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    width:70%;
    height:100%;
    margin-bottom: 1em; 
  }



  /*.c-image-container:last-child{
  } */
  
  .c-image-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.4);
    opacity:0;
    transition: all 0.2s ease!important;
    border-radius: 18px; 
    pointer-events: none; /* Allows clicks to pass through the overlay, meangin the overlay won't block the clickable element(the a tag with the image wrapped inside it */
  }
  
  .c-image-container:hover .c-image-overlay{
    opacity:1; 
  }
  
  .c-image-container img {
    width: 100%!important; /* Make the image fill its container */
    height: 100%;
    display: block; /* Remove extra space below image */
    border-radius: 18px;
  }