/* Ensure the jarallax container is positioned */
 .jarallax {
     position: relative;
     overflow: hidden;
     min-height: 400px;
}
/* The jarallax image should be behind everything */
 .jarallax-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
}
/* Overlay element for gradient effect;
 placed between image and content */
 .overlay-jarallax {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color:orange;
     z-index: 1;
     pointer-events: none;
     opacity: .97;
    /* Prevents the overlay from interfering with interactions */
}
/* Content positioned above the overlay */
 .content {
     position: relative;
     z-index: 2;
     max-width: 800px;
     margin: 0 auto;
     padding: 10px;
     text-align: center;
     color: #000;
}
/* Container that holds the articles */
 .articles-container {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
    /* Space between articles */
     justify-content: space-between;
     padding: 10px;
     box-sizing:border-box;
}
/* Article styling */
 article {
     flex: 1 1 calc(33% - 20px);
    /* Adjust the width: here, roughly three articles per row */
     min-width: 100px;
    /* Ensures articles don’t get too narrow */
    /*background: #f9f9f9;
     border: 1px solid #ccc;
    */
     padding: 20px;
     box-sizing: border-box;
}
 article img {
     width: 50%;
     height: auto;
     display: block;
    /* Ensures no extra space below the image */
     margin: 0 auto 15px;
    /* Top: 0, Left & Right: auto, Bottom: 15px */
}
/* Responsive image inside article */
 article h2 {
     font-size: 20px;
     text-align: center;
     align-content: center;
     font-weight: bolder;
}
/* Responsive adjustment: two columns on medium screens */
 @media (max-width: 800px) {
     article {
         flex: 1 1 calc(50% - 20px);
    }
}
/* Responsive adjustment: one column on small screens */
 @media (max-width: 500px) {
     article {
         flex: 1 1 100%;
    }
}