Template:OSM Meetup Event Header/style.css

/* --- Color Stripe Classes (Original) --- */

.container {
padding: 0;
margin: 0 0 0.5em 0; /* Space below the stripe */
}

.line {
display: flex;
height: 3px; /* Thin stripe height */
overflow: hidden;
border-radius: 2px;
}

.color-block {
flex-grow: 1; /* Each block takes equal width */
height: 100%;
}

/* Define the specific colors for the 5 blocks */
.line .color-block:nth-child(1) { background-color: #0b4f8d; } /* Dark Blue */
.line .color-block:nth-child(2) { background-color: #2b8cbe; } /* Medium Blue (matches border) */
.line .color-block:nth-child(3) { background-color: #55c7ed; } /* Light Blue */
.line .color-block:nth-child(4) { background-color: #92e0f8; } /* Pale Cyan */
.line .color-block:nth-child(5) { background-color: #c7f2ff; } /* Very Pale Cyan */

/* --- New Layout Classes (Moved from inline styles) --- */

/* Outer Container Styles */
.event-header-container {
  margin: auto;
  margin-bottom: 1em;
  background: #f7fbfc;
  border-radius: 6px;
  font-weight: 600;
}

/* Main Content Flexbox (Left/Right Layout) */
.event-header-content {
display: flex;
flex-wrap: wrap; /* Allows image to drop below text on small screens */
justify-content: space-between;
align-items: flex-start;
margin-top: 0.5em;
}

/* Left Side: Event Details */
.event-details-left {
flex: 1 1 60%; /* Takes at least 60% of width, shrinks if needed */
min-width: 250px; /* Ensures readability on very small screens */
}

/* Detail Line Spacing (applies margin to <p> tags) */
.event-detail-line {
margin-bottom: 0.4em;
font-size:1.4rem;
}

/* Icon Spacing (applies margin to <span> tags around icons) */
.event-icon {
margin-right: 0.5em;
}

/* Right Side: Image/Misc Content */
.event-image-right {
flex: 0 0 auto;
margin-top: 0.5em;
max-width: 98%;
width: 350px; /* Preferred image container width */
text-align: right;
}