#sp-header {height: 150px;}
section#sp-main-body {
    --random-background: url("../images/kings-community-church-01.jpg"); /* Default image - you can choose any of the 5 */
    background-image: var(--random-background);
    background-repeat: no-repeat; /* Keep your existing styles */
    background-position: 0% 0%;
    background-size: cover;
    min-height: 100vh; /* Keep this if you're using it */
  }
  
  /* Example media query for smaller screens (adjust breakpoint as needed) */
  @media (max-width: 768px) {
    section#sp-main-body {
      background-size: contain; /* Or a specific size like 100% auto */
    }
  }
  
  /* Another example for even smaller screens */
  @media (max-width: 480px) {
    section#sp-main-body {
      background-size: 100% auto; /*  Width 100%, height adjusts automatically */
    }
  }


.itemid-101 .article-details {text-align: center;color: #fff;text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);background-color:unset !important;padding: 0px;}
.itemid-101 .article-details h1 {font-size: 9rem;color: #fff;}
.itemid-101 .article-details h2 {}
.itemid-101 .article-details h3 {font-size: 2.5rem;}
.itemid-101 .article-details p {font-size: 1.5rem;font-style: italic;}

.article-details {background-color: rgba(255, 255, 255, 0.8);padding: 30px;}