.image-container {
    text-align: center; /* Center the content */
    margin-bottom: 20px; /* Space below each image container */
}

.image-container img {
    display: block; /* Ensure the image is a block-level element */
    margin: 0 auto; /* Center the image */
    border-bottom: 1px solid var(--border-color, #263041); /* Line beneath the image */
    padding-bottom: 10px; /* Space between image and line */
    max-width: 80%; /* Responsive image width */
    height: auto; /* Maintain aspect ratio */
}

.image-source {
    display: block; /* Ensure the source is a block-level element */
    text-align: center; /* Center the source text */
    margin-top: 5px; /* Space between line and source text */
    font-style: italic;
    color: var(--text-tertiary, #909caf); /* Color of the source text */
}

.image-source a {
    color: var(--accent-color, #86c5ff);
    text-decoration: none; /* Removes the underline */
}

.image-source a:hover {
    color: var(--accent-color-hover, #a6d7ff);
}

/* ── Side-by-side charts ───────────────────────────────────────────── */
.charts-side-by-side {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

.charts-side-by-side .chart-cell {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 700px) {
    .charts-side-by-side {
        flex-direction: column;
    }
}