.event-section {
    text-align: center;       /* center titles, dates, description, buttons */
    display: flex;
    flex-direction: column;
    align-items: center;      /* center images and content horizontally */
    gap: 20px;                /* spacing between elements */
    padding: 50px 20px;       /* space inside the section */
    border-bottom: 1px solid #ccc;
}

/* Title */
.event-section h2 {
    margin-bottom: 10px;
    font-family: "Noto Serif", serif;
}

.event-section p {
    margin-bottom: 18px;
}

.event-section .event-description {
    width: 1100px;
  max-width: 90%;
}

.events-nav {
    border-bottom: solid 1px #ccc;
  padding: 30px;
}
/* Dates */
.event-section .event-dates {
    font-weight: bold;
    margin-bottom: 15px;
}

/* Images */
/* Common container */
.event-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 10px;                
    margin-bottom: 20px;
}

.event-scroll-button {
    background:#5f794c !important;
}
/* Make all images respect natural size for layout and override WordPress inline styles */
.event-images img {
    width: auto !important;
    height: auto !important;
    max-width: 100%; 
    display: block;
}

/* Single image */
.event-images-single img {
    max-width: 100%;
}

/* Two images inline */
.event-images-two-inline img {
    width: auto;          
    max-width: 48%;        
    flex: 0 0 auto;       
}

/* 2x2 grid */
.event-images-two-by-two img {
    width: auto;
    max-width: calc(50% - 5px); 
    flex: 0 0 auto;
}

/* Buttons */
.event-buttons a.event-button {
    display: inline-block;
    margin: 5px;
    padding: 6px 15px;
    background: #5f794c;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 17px;
}
.event-buttons a.event-button:focus {
    display: inline-block;
    margin: 5px;
    padding: 6px 15px;
    background: #5f794c !important;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 17px;
}

/* Responsive tweaks for small screens */
@media (max-width: 600px) {
    .event-images-two-inline img,
    .event-images-two-by-two img {
        max-width: 100%;
    }
    .event-buttons a.event-button {
        width: 100%;      
    }
}