.chart-images-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Adjust to align items to the start */
}

.chart-image-wrapper {
    /* Adjust width to be less than 50% to account for the gap */
    width: calc(50% - 10px); /* Subtract desired gap */
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--bs-primary);
    border-radius: 5px;
    margin-bottom: 10px; /* Space between rows */
    margin-right: 10px; /* Space between images on the same row */
    background: #fff;
}

.map-thumb {
    width: 100%;
    height: auto;
    display: block;
}

/* Clear the right margin for every 2nd item to maintain the grid */
.chart-image-wrapper:nth-child(2n) {
    margin-right: 0;
}

.difficulty-display {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px 20px 20px 20px; /* Include padding-left adjustment */
    margin-bottom: 20px;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .chart-image-wrapper {
        width: 100%; /* Full width for smaller screens */
        margin-right: 0; /* Remove the right margin on smaller screens */
    }
}

.distance-details {
    font-size: 0.9em;
    text-align: center;
}