/* -------------------------------
   1. Top Gradient Row
---------------------------------*/
.top-gradient-row {
  background-image: url('https://hope.org.za/wp-content/uploads/2025/10/header_bg_tile-500pxh.png');
  background-repeat: repeat-x;   /* repeat horizontally only */
  background-size: auto 100%;    /* full height, no vertical repeat */
  background-position: top center;
}

/* -------------------------------
   2. Header Tile Image
---------------------------------*/
.image-container.header-tile img,
.image-container.header-tile .vc_single_image-wrapper img {
  width: 80% !important;       /* desktop width */
  max-width: 1300px !important; /* prevents stretching */
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;   /* center horizontally */
}

/* -------------------------------
   3. Story Title Image
---------------------------------*/
.image-container.story-title img,
.image-container.story-title .vc_single_image-wrapper img {
  width: 70% !important;        /* desktop width */
  max-width: 1300px !important; /* prevents stretching */
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;    /* center horizontally */
}

/* -------------------------------
   4. Mobile / Tablet Adjustments
---------------------------------*/
@media (max-width: 768px) {
  .image-container.header-tile img,
  .image-container.header-tile .vc_single_image-wrapper img {
    width: 90% !important;
    max-width: none !important;
  }
  
  .image-container.story-title img,
  .image-container.story-title .vc_single_image-wrapper img {
    width: 95% !important;
    max-width: none !important;
  }
}

/* -------------------------------
   5. Optional: Reset row padding for nested rows
---------------------------------*/
.image-container.header-tile .vc_row,
.image-container.story-title .vc_row {
  padding: 0 !important;
  margin: 0 !important;
}

.fa-accessible-icon {
  color: #ffffff !important; /* change to your row's background color */
}