.container-component {
  background-color: #FFFFFF60 !important;
}

.container-component main {
  /* Border Radius for images */
  .blog-items .blog-item, .blog-items .blog-item .item-image {
    border-radius: 5px;
  }

  .blog-items .blog-item {
    padding: 5px;
    background-color: #FFFFFFD0;
  }

  .blog-items .blog-item .item-image {
    border-radius: 5px;
    text-align: center;
    min-height: 200px;
    img {
      max-height: 250px;
    }
  }

  /* Background gradient black over image */
  .item-image {
    position:relative;
    
    figcaption {
      position: absolute;
      z-index: 3;
      background: rgba(255, 255, 255, 0.8);
      color: #000;
      width: fit-content;
      top: 13px;
      right: 10px;
      padding: 2px 10px;
      border-radius: 5px;
    }
  }

  .item-image:after {
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:100%; height:60%;
    display:inline-block;
    background: linear-gradient(to top, #000, rgba(0,0,0,0));
    z-index: 2;
    pointer-events: none;
  }

  /* Featured article position in image with a white background */
  .blog-items.items-leading .blog-item .item-image {
    text-align: right;
    min-height: 400px;
    img {
      max-height: 750px;
      width: auto;
    }
  }
  
  .blog-items.items-leading .item-content {
    background-color: white;
    opacity: 0.8;
    padding: 1rem;
    width: 80%;
    box-sizing: border-box;
    border-radius: 5px;
  }
  
  .blog-items.items-leading .blog-item:has(.item-image) {
    position: relative;
    width: 100%;
  }
  
  .blog-items.items-leading .blog-item:has(.item-image) .item-content {
    position: absolute;
    top: 1rem;
    left: 1rem;
  }

  .blog-items div.img_date {
    background-color: #FFFFFFC0 !important;
    border-radius: 5px;
    text-align: right;
    padding-inline: 5px;
    position: absolute;
    bottom: 25px;
    right: 10px;
    z-index: 10;
  }
}